这里讲的是element-u组件库中的校验规则,在不同组件库检验规则是不一样的,根据实际情况来说

表单校验:

1. 校验的必要性:

  1.      向后端发请求调用接口之前，我们需要对所要传递的参数进行验证，来把用户的错误扼杀在摇篮之中。<br />        不要相信任何用户的输入!!!!!

2. 校验的内容:

1.内容不能为空
2.密码长度必须多少位
3.手机号的格式要合规
比如: 手机号不能为空，且必须为11位手机号 (/^1[0-9]{10}$/)
4.邮箱的格式要合规
……

3.校验的步骤:

  1.      3.1 定义验证规则。data()中按格式定义规则<br />        3.2 在模板上做属性配置来应用规则（三个配置）:<br />                         a) 给表单中 el-form 组件绑定 model 为表单数据对象<br />                         b) 给表单中 el-form 组件绑定 rules 属性配置验证规则<br />                         c) 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表<br />                            单对象中的数据名称<br />        3.3 手动兜底验证

步骤1: 在data中定义规则

格式:

  1. data() {
  2.   return {
  3.     rules: {
  4.         // 字段名1：表示要验证的属性
  5.         // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
  6.         //     数组中的多条规则会按顺序进行
  7.         字段名1: [
  8.           { 验证规则1 },
  9.           { 验证规则2 },
  10.         ],
  11.         字段名2: [
  12.           { 验证规则1 },
  13.           { 验证规则2 },
  14.         ], 
  15.         }
  16.   }
  17. }

代码演示:

注意这里面的mobile,password仅做示例,实际情况需要根据后端定义的数据来显示

  1. data () {
  2.     return {
  3.        form: {
  4.         phone: '', // 和后端保持一致
  5.         password: ''
  6.       },
  7.        rules: {
  8.         // 字段名：mobile就表示要验证的 属性
  9.         // 值: 是一个数组。数组中的每一项表示一条规则。
  10.         mobile: [
  11.            // trigger: 什么时候触发验证 
  12.           { required: true, message: '手机号不能为空', trigger: 'blur' },
  13.           // pattern : 正则
  14.           { pattern: /^1[345678]\d{9}$/, message: '请输入合法的手机号', trigger: 'blur' }
  15.         ],
  16.          password: [
  17.           { required: true, message: '密码不能为空', trigger: 'blur' },
  18.           { min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' },
  19.       }
  20.     }
  21.   },

步骤2: 模板中的配置

代码演示:

注意这里仅做示范: 绑定的值是根据后端决定的

  1. <el-form label-width="80px" :model="form" :rules="rules"> // 绑定地方: model和rules
  2.   <el-form-item label="手机号" prop="mobile"> // 绑定地方: prop
  3.     <el-input v-model="form.mobile"></el-input>
  4.   </el-form-item>
  5.   <el-form-item label="密码" prop="code">
  6.     <el-input v-model="form.code"></el-input>
  7.   </el-form-item>
  8.   <el-form-item>
  9.     <el-button type="primary" @click="onSubmit">立即创建</el-button>
  10.     <el-button @click="onCancel">取消</el-button>
  11.   </el-form-item>
  12. </el-form>

验收效果:

当用户输入的内容不符合表单规则要求时，并且某个输入框失焦时，它会给出相应的提示，当我们输入的内容符合要求时，错误提示会自动消失。

步骤3: 手动兜底校验

格式:

  1. element-ui的表单组件.validate(valid => {
  2.     if(valid) {
  3.        // 通过了验证
  4.     } else {
  5.          // 验证失败
  6.     }
  7. })

代码演示:

第一步:

  1.           ![image.png](https://cdn.nlark.com/yuque/0/2021/png/21762447/1624198385716-82b0df1e-6ae9-4a72-9dc1-bebab34b5a9d.png#clientId=u8a3960f1-dc1a-4&from=paste&height=66&id=u1264de4a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=66&originWidth=350&originalType=binary&ratio=1&size=4124&status=done&style=none&taskId=uf85fc1ec-b927-453f-9f06-91721c701aa&width=350)

第二步:

  1.    doLogin () {
  2.       alert('doLogin')
  3.     },
  4.     onSubmit () {
  5.       // 手动兜底校验  提交数据
  6.       this.$refs.form.validate(valid => {
  7.         if (valid) {
  8.           // 表单检验通过  做后续的事情
  9.           this.doLogin()
  10.         } else {
  11.           alert('有错误')
  12.         }
  13.       })
  15.     }

表单校验中的-自定义校验规则:

比如: 密码不能是123456

格式: 在rules中定义validator

  1. rules:{
  2.     属性名1: [
  3.       { 
  4.         // 注意参数顺序
  5.         validator: function (rule, value, callback) {
  6.               // rule：采用的规则
  7.           // value: 被校验的值
  8.           // callback是回调函数， 
  9.           //      如果通过了规则检验，就直接调用callback()
  10.           //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
  11.             //         例如：callback(new Error('错误说明'))
  12.           }, 
  13.         trigger: 'blur' 
  14.      }]
  15. }

代码演示:

  1. rules: {
  2.   name: [{required: true, message:'必须要填入', triggle: 'blur'}],
  3.   code: [
  4.       {
  5.         validator:(rule, value, callback)=>{
  6.           console.log(rule, value, callback)
  7.           if(value === '123456') {
  8.             callback(new Error('这是世界上最差的密码了'))
  9.           } else {
  10.             callback()  // 无论成功失败,都要调用
  11.           }
  12.           },
  13.         triggle: 'blur'
  14.       },
  15.       {min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},
  16.       {required: true, message:'必须要填入', triggle: 'blur'},
  17.   ]
  18. }

重置表单清理校验痕迹:

说明:

  1.   校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。

格式

  1. this.$refs.form组件的引用.resetFields()