element + vue 表单校验

第一步 prop绑定

表单校验第一步当然是对el-form绑定rules了，那么绑定之后我们就可以在这个rules对象里进行一些字段的校验，为了使我们的校验规则与表单字段联系起来，prop便充当了桥梁角色，让字段能够匹配到相应的校验规则。如果只写了规则而没有使用prop绑定，那么这个规则是没有起到作用的，并不会触发校验。
绑定的时候一定注意要与表单上双向绑定的字段一致，如下图：

第二步 校验规则

1、普通校验
我把一些简单的校验规则称为普通校验，类似控制表单是否必填、表单长度的限制、简单正则表达式的校验等，这些校验没有很复杂的操作，只是几条规则来限制字段。举例：
```

projectName: [ {required: true, message: '请输入项目名称', trigger: 'blur'}, {pattern: /^([a-zA-Z0-9\u4e00-\u9fa5]*)$/, message: '不包含特殊字符', trigger: 'blur'}, {min: 1, max: 30, message: '长度不超过30'} ],

 
 这条校验规则就包含了我提到的三个，要注意的是：每一个校验点最好放置为一条规则，检查是从第一条开始检查，不满足哪一条就会马上触发，直到所有校验规则都通过就表示通过。每条规则都要有trigger触发方式，这个根据需求自己选择，可以选择一种触发方式，也可以选择多种。个人建议在做表单时，如果有需要数据回显（比如编辑，直接给表单赋值），且有多条数据（如列表形式），对于input框最好不要使用change的校验触发方式。原因主要是在打开第一项数据时，不会触发校验，没有其他操作又打开第二项数据时，会自动触发校验，因为input框中的值发生了变化。
 2、数字校验
 数字校验也没有很复杂，就是需要注意的地方多一点。第一点，v-model要接上后缀number，表示数字。校验规则里加上type： 'number'，不加的话不会触发校验。这里我列几种情况说明一下这个type的用法。
 

num: [ {required: true, message: '请输入面积', trigger: 'blur'}, {type: 'number', message: '请输入数字', trigger: 'blur'}, ] // 这种方式适合对正整数负整数的校验

num: [ {required: true, message: '请输入面积', trigger: 'blur'}, {type: 'number', message: '请输入数字', trigger: 'blur'}, ] // 表单上加了type，这种方式适合输入包含正负小数的校验，例如1.36、-10.2352等

num: [ {required: true, message: '请输入面积', trigger: 'blur'}, {type: 'float', message: '请输入数字', trigger: 'blur'}, ] // float浮点数,表单上的type是不能丢的

 

   3、自定义校验。自定义校验就是在校验规则里说明validator为自己所写的方法。自定义校验是非常灵活的，一般我们所写的方法放在data函数里（return{}之前定义），也可以直接放在绑定的检验规则里。在使用时，可以使用箭头函数的方式，将this指向当前的vue实例，这样可以访问到表单的其他值。自定义方法的三个参数rule、value、callback是非常重要的。rule表示校验规则，value表示当前的值，callback表示回调函数。callback的用法：在每一条判断语句之后都要使用callback回调函数。callback使用不当的话，在提交表单时，校验会一直不通过且没有提示。因为没有回调函数，当函数进行到这一步时，没人告诉他该怎么返回，就一直停在这里，无法跳出。无论嵌套了多个判断语句，每个语句结束时都要调用回调函数。
   给个例子，下面是有三条校验规则的小数校验：

 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d069928a5f1949d0b90df31b13f4fd13~tplv-k3u1fbpfcp-zoom-1.image)
  
## 第三步 提交校验
   1、提交验证。方法是this.$refs.form.validate(valid => {})。refs后面跟的是当前表单绑定的ref属性，也可以使用数组的方式，this.$refs[form].方法validate中参数valid是一个布尔值，表单验证全部通过就是true，有一项不通过则为false。在if语句里进行校验通过后的操作，如果涉及到异步操作，则需要在valid前面加上时async来进行异步操作。
   这里如果提交的时候不执行函数体，并且valid为false且不报错，请看前面分析的第一步和第二步。
   
## 第四步 清除校验
   清除校验有两种方式，element文档上的介绍如下：
  ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a4189d6aea8d4d7db1de4ca026f6a772~tplv-k3u1fbpfcp-zoom-1.image)
  根据需求选择这两种方法。我一般使用resetFields方法，在使用时需注意这是将整个表单重置为初始值，所以要定义初始值，避免没有初始值二触发校验。
  
## 关于数据回显触发校验的经验总结
   1、