8000 Update form-validation.md (typo) (#1495) · vuejs-vn/vuejs.org@ef14afa · GitHub
[go: up one dir, main page]

Skip to content
This repository was archived by the owner on Sep 16, 2020. It is now read-only.

Commit ef14afa

Browse files
Jinjiangsdras
authored andcommitted
Update form-validation.md (typo) (vuejs#1495)
* Update form-validation.md * Update form-validation.md
1 parent 678f4b8 commit ef14afa

File tree

1 file changed

+9
-9
lines changed

1 file changed

+9
-9
lines changed

src/v2/cookbook/form-validation.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@ Given a form of three fields, make two required. Let's look at the HTML first:
4646
</form>
4747
```
4848

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).
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).
5050

5151
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.
5252

53-
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.
53+
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.
5454

5555
``` js
5656
const app = new Vue({
@@ -73,7 +73,7 @@ const app = new Vue({
7373
})
7474
```
7575

76-
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+
Fairly short and simple. We define 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.
7777

7878
<p data-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 <a href="https://codepen.io/cfjedimaster/pen/GObpZM/">form validation 1</a> by Raymond Camden (<a href="https://codepen.io/cfjedimaster">@cfjedimaster</a>) on <a href="https://codepen.io">CodePen</a>.</p>
7979
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
@@ -118,7 +118,7 @@ For the second example, the second text field (age) was switched to email which
118118
</form>
119119
```
120120

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.
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.
122122

123123
``` js
124124
const app = new Vue({
@@ -193,7 +193,7 @@ For the third example, we've built something you've probably seen in survey apps
193193
</form>
194194
```
195195

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.
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.
197197

198198
``` js
199199
const app = new Vue({
@@ -208,7 +208,7 @@ const app = new Vue({
208208
},
209209
computed:{
210210
total:function() {
211-
//must parse cuz Vue turns empty value to string
211+
// must parse cuz Vue turns empty value to string
212212
return Number(this.weapons)+
213213
Number(this.shields)+
214214
Number(this.coffee)+
@@ -240,7 +240,7 @@ function main(args) {
240240

241241
return new Promise((resolve, reject) => {
242242

243-
// bad product names: vista,empire,mbp
243+
// bad product names: vista, empire, mbp
244244
let badNames = ['vista','empire','mbp'];
245245
if(badNames.includes(args.name)) reject({error:'Existing product'});
246246
resolve({status:'ok'});
@@ -298,7 +298,7 @@ const app = new Vue({
298298
if(res.error) {
299299
this.errors.push(res.error);
300300
} else {
301-
// redirect to a new url, or do something on success
301+
           // redirect to a new URL, or do something on success
302302
alert('ok!');
303303
}
304304
});
@@ -315,7 +315,7 @@ We start off with a variable representing the URL of the API that is running on
315315

316316
## Alternative Patterns
317317

318-
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:
318+
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:
319319

320320
* [vuelidate](https://github.com/monterail/vuelidate)
321321
* [VeeValidate](http://vee-validate.logaretm.com/)

0 commit comments

Comments
 (0)
0