You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/v2/cookbook/form-validation.md
+28-29Lines changed: 28 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,14 @@
1
1
---
2
-
title: Form Validation
2
+
title: 表单校验
3
3
type: cookbook
4
4
order: 3
5
5
---
6
6
7
-
## Simple Example
7
+
## 简单的示例
8
8
9
-
Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let's begin with a simple example.
@@ -46,11 +46,11 @@ Given a form of three fields, make two required. Let's look at the HTML first:
46
46
</form>
47
47
```
48
48
49
-
Let's cover it from the top. The form tag has an ID that we'll be using for the Vue component. There's a submit handler that you'll see in a bit, and the action is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course).
Beneath that there is a paragraph that shows or hides itself based on an error state. This will render a simple list of errors on top of the form. Also note we fire the validation on submit rather than as every field is modified.
The final thing to note is that each of the three fields has a corresponding v-model to connect them to values we will work with in the JavaScript. Now let's look at that.
Fairly short and simple. We default an array to hold errors and set null values for the three form fields. The checkForm logic (which is run on submit remember) checks for name and age only as movie is optional. If they are empty we check each and set a specific error for each. And that's really it. You can run the demo below. Don't forget that on a successful submission it's going to POST to a temporary URL.
76
+
非常短小精悍。我们定义了一个数组来放置错误，并将这三个表单字段的默认值设为 `null`。`checkForm` 的逻辑 (在表单提交时运行) 只会检查姓名和年龄，因为电影时选填的。如果它们是空的，那么我们会检查每一个字段并设置相应的错误，差不多就是这样。你可以在下面运行这个 demo。不要忘记提交成功时它会 POST 到一个临时的 URL。
77
77
78
-
<pdata-height="265"data-theme-id="0"data-slug-hash="GObpZM"data-default-tab="html,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="form validation 1"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/GObpZM/">form validation 1</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
For the second example, the second text field (age) was switched to email which will be validated with a bit of custom logic. The code is taken from the StackOverflow question, [How to validate email address in JavaScript?](https://stackoverflow.com/questions/46155/how-to-validate-email-address-in-javascript). This is an awesome question because it makes your most intense Facebook political/religious argument look like a slight disagreement over who makes the best beer. Seriously - it's insane. Here is the HTML, even though it's really close to the first example.
@@ -118,7 +118,7 @@ For the second example, the second text field (age) was switched to email which
118
118
</form>
119
119
```
120
120
121
-
While the change here is small, note the `novalidate="true"` on top. This is important because the browser will attempt to validate the email address in the field when type="email". Frankly it may make more sense to trust the browser in this case, but as we wanted an example with custom validation, we're disabling it. Here's the updated JavaScript.
<pdata-height="265"data-theme-id="0"data-slug-hash="vWqNXZ"data-default-tab="html,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="form validation 2"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/vWqNXZ/">form validation 2</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
For the third example, we've built something you've probably seen in survey apps. The user is asked to spend a "budget" for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
@@ -193,7 +193,7 @@ For the third example, we've built something you've probably seen in survey apps
193
193
</form>
194
194
```
195
195
196
-
Note the set of inputs covering the five different features. Note the addition of .number to the v-model attribute. This tells Vue to cast the value to a number when you use it. However, there is a bug with this feature such that when the value is blank, it turns back into a string. You'll see the workaround below. To make it a bit easier for the user, we also added a current total right below so they can see, in real time, what their total is. Now let's look at the JavaScript.
We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup. My checkForm method now just needs to see if the total is 100 and that's it. You can play with this here:
<pdata-height="265"data-theme-id="0"data-slug-hash="vWqGoy"data-default-tab="html,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="form validation 3"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/vWqGoy/">form validation 3</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick [OpenWhisk](http://openwhisk.apache.org/) serverless action to do the validation. While it isn't terribly important, here is the logic:
//redirect to a new url, or do something on success
301
+
//在成功的时候重定向到一个新的 URL 或做一些别的事情
302
302
alert('ok!');
303
303
}
304
304
});
@@ -308,15 +308,14 @@ const app = new Vue({
308
308
})
309
309
```
310
310
311
-
We start off with a variable representing the URL of the API that is running on OpenWhisk. Now look at `checkForm`. In this version, we always prevent the form from submitting (which, by the way, could be done in the HTML with Vue as well). You can see a basic check on `this.name`being empty, and then we hit the API. If it's bad, we add an error as before. If it's good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well. You can run this demo below:
311
+
我们从一个运行在 OpenWhisk 的 API 的 URL 变量开始。现在注意 `checkForm`。在这个版本中，我们始终阻止了表单的提交 (当然，它也可以通过 Vue 在 HTML 中完成)。你可以看到一个基本的校验，即 `this.name`是否为空，然后我们请求这个 API。如果名字是无效的，我们就添加一个错误。如果是有效的，我们就不做任何事 (只是一个 alert)，但是你可以引导用户去一个新页面，在 URL 中带上产品的名字，或者其它行为。接下来你可以体验这个 demo：
312
312
313
313
<pdata-height="265"data-theme-id="0"data-slug-hash="BmgzeM"data-default-tab="js,result"data-user="cfjedimaster"data-embed-version="2"data-pen-title="form validation 4"class="codepen">See the Pen <ahref="https://codepen.io/cfjedimaster/pen/BmgzeM/">form validation 4</a> by Raymond Camden (<ahref="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <ahref="https://codepen.io">CodePen</a>.</p>
While this cookbook entry focused on doing form validation "by hand", there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include:
0 commit comments