表单校验

基本的示例

Watch a free lesson on Vue School

表单校验是浏览器原生支持的，但是有的时候用不同的浏览器处理起来需要一些小技巧。即使当表单校验已经被完美支持，你也还是有很多时候需要进行自定义的校验。这时一个更加手动的基于 Vue 的解决方案可能会更适合。我们来看一个简单的示例。

给定一个表单，包含三个字段，其中两个是必填项。我们先来看看 HTML：

  1. <form
  2.   id="app"
  3.   @submit="checkForm"
  4.   action="https://vuejs.org/"
  5.   method="post"
  6. >
  8.   <p v-if="errors.length">
  9.     <b>Please correct the following error(s):</b>
  10.     <ul>
  11.       <li v-for="error in errors">{{ error }}</li>
  12.     </ul>
  13.   </p>
  15.   <p>
  16.     <label for="name">Name</label>
  17.     <input
  18.       id="name"
  19.       v-model="name"
  20.       type="text"
  21.       name="name"
  22.     >
  23.   </p>
  25.   <p>
  26.     <label for="age">Age</label>
  27.     <input
  28.       id="age"
  29.       v-model="age"
  30.       type="number"
  31.       name="age"
  32.       min="0"
  33.     >
  34.   </p>
  36.   <p>
  37.     <label for="movie">Favorite Movie</label>
  38.     <select
  39.       id="movie"
  40.       v-model="movie"
  41.       name="movie"
  42.     >
  43.       <option>Star Wars</option>
  44.       <option>Vanilla Sky</option>
  45.       <option>Atomic Blonde</option>
  46.     </select>
  47.   </p>
  49.   <p>
  50.     <input type="submit" value="Submit">
  51.   </p>
  53. </form>

我们从头到尾看一遍，这个 <form> 标记上有一个我们将会用在 Vue 组件上的 ID。这里有一个你稍后会看到的 submit 处理函数，而这里的 action 是一个可能指向了某个真实服务器的临时 URL (当然你在服务端也是要有校验的)。

下面有一段内容，会根据错误状态进行显示或隐藏。它将会在表单的最顶端渲染一个简单的错误列表。同时要注意我们会在提交的时候进行校验，而不是每个字段被修改的时候。

最后值得注意的是这三个字段都有一个对应的 v-model 来连接它们的值，我们将会在 JavaScript 中使用它。现在我们就来看一下。

  1. const app = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     errors: [],
  5.     name: null,
  6.     age: null,
  7.     movie: null
  8.   },
  9.   methods:{
  10.     checkForm: function (e) {
  11.       if (this.name && this.age) {
  12.         return true;
  13.       }
  15.       this.errors = [];
  17.       if (!this.name) {
  18.         this.errors.push('Name required.');
  19.       }
  20.       if (!this.age) {
  21.         this.errors.push('Age required.');
  22.       }
  24.       e.preventDefault();
  25.     }
  26.   }
  27. })

非常短小精悍。我们定义了一个数组来放置错误，并将这三个表单字段的默认值设为 null。checkForm 的逻辑 (在表单提交时运行) 只会检查姓名和年龄，因为电影是选填的。如果它们是空的，那么我们会检查每一个字段并设置相应的错误，差不多就是这样。你可以在下面运行这个 demo。不要忘记提交成功时它会 POST 到一个临时的 URL。

在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验 1。

使用自定义校验

对于第二个示例来说，第二个文本字段 (年龄) 变换成了电子邮件地址，它将会通过一些自定义的逻辑来校验。这部分代码来自 StackOverflow 的问题：如何在 JavaScript 中校验电子邮件地址。这是一个很好的问题，因为它会让 Facebook 上最激烈的政治、宗教争论看上去都只是“哪家的啤酒最好喝”这样的小分歧了。讲真的这很疯狂。我们来看 HTML，尽管它和第一个例子很接近。

  1. <form
  2.   id="app"
  3.   @submit="checkForm"
  4.   action="https://vuejs.org/"
  5.   method="post"
  6.   novalidate="true"
  7. >
  9.   <p v-if="errors.length">
  10.     <b>Please correct the following error(s):</b>
  11.     <ul>
  12.       <li v-for="error in errors">{{ error }}</li>
  13.     </ul>
  14.   </p>
  16.   <p>
  17.     <label for="name">Name</label>
  18.     <input
  19.       id="name"
  20.       v-model="name"
  21.       type="text"
  22.       name="name"
  23.     >
  24.   </p>
  26.   <p>
  27.     <label for="email">Email</label>
  28.     <input
  29.       id="email"
  30.       v-model="email"
  31.       type="email"
  32.       name="email"
  33.     >
  34.   </p>
  36.   <p>
  37.     <label for="movie">Favorite Movie</label>
  38.     <select
  39.       id="movie"
  40.       v-model="movie"
  41.       name="movie"
  42.     >
  43.       <option>Star Wars</option>
  44.       <option>Vanilla Sky</option>
  45.       <option>Atomic Blonde</option>
  46.     </select>
  47.   </p>
  49.   <p>
  50.     <input
  51.       type="submit"
  52.       value="Submit"
  53.     >
  54.   </p>
  56. </form>

尽管这里的不同点很小，注意顶端的 novalidate="true"。但是这很重要，因为浏览器会尝试在 type="email" 的字段校验邮件地址。坦白说在这个案例中浏览器的校验规则是值得信任的，不过我们想要创建一个自定义校验的例子，所以把它禁用了。以下是更新后的 JavaScript。

  1. const app = new Vue({
  2.   el: '#app',
  3.   data: {
  4.     errors: [],
  5.     name: null,
  6.     email: null,
  7.     movie: null
  8.   },
  9.   methods: {
  10.     checkForm: function (e) {
  11.       this.errors = [];
  13.       if (!this.name) {
  14.         this.errors.push("Name required.");
  15.       }
  16.       if (!this.email) {
  17.         this.errors.push('Email required.');
  18.       } else if (!this.validEmail(this.email)) {
  19.         this.errors.push('Valid email required.');
  20.       }
  22.       if (!this.errors.length) {
  23.         return true;
  24.       }
  26.       e.preventDefault();
  27.     },
  28.     validEmail: function (email) {
  29.       var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  30.       return re.test(email);
  31.     }
  32.   }
  33. })

如你所见，我们添加了一个新方法 validEmail，它将会在 checkForm 中被调用了。我们现在可以这样运行示例：

在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验 2。

另一个自定义校验的例子

在第三个示例中，我们已经构建了一些你可能在一些调研类应用中见过的东西。用户需要花掉“预算”来为歼星舰模型装配一套部件。总价必须等于 100。先看 HTML。

  1. <form
  2.   id="app"
  3.   @submit="checkForm"
  4.   action="https://vuejs.org/"
  5.   method="post"
  6.   novalidate="true"
  7. >
  9.   <p v-if="errors.length">
  10.     <b>Please correct the following error(s):</b>
  11.     <ul>
  12.       <li v-for="error in errors">{{ error }}</li>
  13.     </ul>
  14.   </p>
  16.   <p>
  17.     Given a budget of 100 dollars, indicate how much
  18.     you would spend on the following features for the
  19.     next generation Star Destroyer. Your total must sum up to 100.
  20.   </p>
  22.   <p>
  23.     <input
  24.       v-model.number="weapons"
  25.       type="number"
  26.       name="weapons"
  27.     > Weapons <br/>
  28.     <input
  29.       v-model.number="shields"
  30.       type="number"
  31.       name="shields"
  32.     > Shields <br/>
  33.     <input
  34.       v-model.number="coffee"
  35.       type="number"
  36.       name="coffee"
  37.     > Coffee <br/>
  38.     <input
  39.       v-model.number="ac"
  40.       type="number"
  41.       name="ac"
  42.     > Air Conditioning <br/>
  43.     <input
  44.       v-model.number="mousedroids"
  45.       type="number"
  46.       name="mousedroids"
  47.     > Mouse Droids <br/>
  48.   </p>
  50.   <p>
  51.     Current Total: {{total}}
  52.   </p>
  54.   <p>
  55.     <input
  56.       type="submit"
  57.       value="Submit"
  58.     >
  59.   </p>
  61. </form>

这组输入框覆盖了五个不同的部件。注意这里为 v-model 特性添加了 .number。它会告诉 Vue 将其值作为数字来使用。不过这里有一个小小的 bug，那就是当其值为空的时候，它会回到字符串格式，稍后你将会看到变通的办法。为了让用户使用起来更方便，我们添加展示了一个当前的总和，这样我们就能够实时的看到它们一共花掉了多少钱。现在我们来看看 JavaScript。

  1. const app = new Vue({
  2.   el: '#app',
  3.   data:{
  4.     errors: [],
  5.     weapons: 0,
  6.     shields: 0,
  7.     coffee: 0,
  8.     ac: 0,
  9.     mousedroids: 0
  10.   },
  11.   computed: {
  12.      total: function () {
  13.        // 必须解析，因为 Vue 会将空值转换为字符串
  14.        return Number(this.weapons) +
  15.          Number(this.shields) +
  16.          Number(this.coffee) +
  17.          Number(this.ac+this.mousedroids);
  18.      }
  19.   },
  20.   methods:{
  21.     checkForm: function (e) {
  22.       this.errors = [];
  24.       if (this.total != 100) {
  25.         this.errors.push('Total must be 100!');
  26.       }
  28.       if (!this.errors.length) {
  29.         return true;
  30.       }
  32.       e.preventDefault();
  33.     }
  34.   }
  35. })

我们将总和设置为了一个计算属性，从那个我们解决掉的 bug 外面看上去，这已经足够了。我的 checkForm 方法现在只需要关注总和是不是 100 了。你可以在这里试用：

在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验3。

服务端校验

在我们最终的示例中，我们构建了一些用到 Ajax 的服务端校验的东西。这个表单将会问你为一个新产品起名字，并且将会确保这个名字是唯一的。我们快速写了一个 OpenWhisk 的 serverless action 来进行这个校验。虽然这不是非常重要，但其逻辑如下：

  1. function main(args) {
  2.   return new Promise((resolve, reject) => {
  3.     // 不好的产品名：vista, empire, mbp
  4.     const badNames = ['vista', 'empire', 'mbp'];
  6.     if (badNames.includes(args.name)) {
  7.       reject({error: 'Existing product'});
  8.     }
  10.     resolve({status: 'ok'});
  11.   });
  12. }

基本上除了“vista”、“empire”和“mbp”的名字都是可以接受的。好，让我们来看看表单。

  1. <form
  2.   id="app"
  3.   @submit="checkForm"
  4.   method="post"
  5. >
  7.   <p v-if="errors.length">
  8.     <b>Please correct the following error(s):</b>
  9.     <ul>
  10.       <li v-for="error in errors">{{ error }}</li>
  11.     </ul>
  12.   </p>
  14.   <p>
  15.     <label for="name">New Product Name: </label>
  16.     <input
  17.       id="name"
  18.       v-model="name"
  19.       type="text"
  20.       name="name"
  21.     >
  22.   </p>
  24.   <p>
  25.     <input
  26.       type="submit"
  27.       value="Submit"
  28.     >
  29.   </p>
  31. </form>

这里没有任何特殊的东西。接下来我们再看看 JavaScript。

  1. const apiUrl = 'https://openwhisk.ng.bluemix.net/api/v1/web/rcamden%40us.ibm.com_My%20Space/safeToDelete/productName.json?name=';
  3. const app = new Vue({
  4.   el: '#app',
  5.   data: {
  6.     errors: [],
  7.     name: ''
  8.   },
  9.   methods:{
  10.     checkForm: function (e) {
  11.       e.preventDefault();
  13.       this.errors = [];
  15.       if (this.name === '') {
  16.         this.errors.push('Product name is required.');
  17.       } else {
  18.         fetch(apiUrl + encodeURIComponent(this.name))
  19.         .then(res => res.json())
  20.         .then(res => {
  21.           if (res.error) {
  22.             this.errors.push(res.error);
  23.           } else {
  24.             // 在成功的时候重定向到一个新的 URL 或做一些别的事情
  25.             alert('ok!');
  26.           }
  27.         });
  28.       }
  29.     }
  30.   }
  31. })

我们从一个运行在 OpenWhisk 的 API 的 URL 变量开始。现在注意 checkForm。在这个版本中，我们始终阻止了表单的提交 (当然，它也可以通过 Vue 在 HTML 中完成)。你可以看到一个基本的校验，即 this.name 是否为空，然后我们请求这个 API。如果名字是无效的，我们就添加一个错误。如果是有效的，我们就不做任何事 (只是一个 alert)，但是你可以引导用户去一个新页面，在 URL 中带上产品的名字，或者其它行为。接下来你可以体验这个 demo：

在 CodePen 查看 Raymond Camden (@cfjedimaster) 的 表单校验4。

其它替代模式

这份秘笈专注在“手动”校验表单，当然一些非常棒的 Vue 的库会为你搞定这些事情。使用一些预打包的库可能会影响你的应用最终的体积，但是好处是非常多的。这里有经过充分测试且保持日常更新的代码。其中包括以下 Vue 的表单校验库：