Vue中关于ElementUI表单验证整理

摘要：

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可，如下：rules为验证规则，field为表单字段名。

<el-form :rules="rules">
    <el-form-item prop="field"></el-form-item>
</el-form>

使用方法

1.绑定

• model：绑定对应需要校验的数据
• rules：绑定校验规则
• prop：绑定的表单字段名

注：prop的名称、表单字段名、校验规则名三者必须一致，否则校验不生效
例： form: { name: ’ '}, rules: { name: ’ '}, prop=“name”

<el-form :model="form" :rules="rules">
    <el-form-item prop="name"></el-form-item>
</el-form>

 rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
 form: { name: '' }

rules绑定值的类型为Object，以键值对的形成出现，其中key为校验规则名（prop的名称、校验规则名），值则为校验规则数组

2.触发、重置、移除

<el-form :model="form" :rules="rules" ref="ruleForm">
    <el-form-item prop="name"></el-form-item>
</el-form>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

// 触发校验
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
     if (valid) {
       // 通过校验
     } else {
       // 未通过校验
       return false;
     }
   });
},
// 重置校验：对该表单项进行重置，将其值重置为初始值并移除校验结果
resetForm(formName) {
   this.$refs[formName].resetFields();
},
/**
 移除表单项的校验结果
 传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
 */
clearFormName(formName,name,nameArray){
   this.$refs[formName].clearValidate();
   this.$refs[formName].clearValidate([name]);
   this.$refs[formName].clearValidate(nameArray);
}

3. 自定义校验规则

 data() {
    let checkPhone = (rule, value, callback) => {
      let reqPhone = /^1[3456789]\d{9}$/
      if (reqPhone.test(value)) {
        callback()
      } else {
        callback(new Error('手机号格式不正确！'))
      }
    }
    return {
      rules: {
        phone: [{ validator: checkPhone, trigger: 'blur' }]
      }
    }
  }

注：自定义校验 callback 必须被调用。

• 校验规则参数

类型	描述
type	标志要使用的validator的数据类型
required	是否必填
message	提示内容
trigger	触发条件（change、blur）
min	最小值
max	最大值
len	精准长度 (优先级高于min,max)
enum	枚举中存在该值 (type必须为enum类型)
whitespace	不能包含空白符
validator	正则 (必须加 required: true)

• type类型

type	描述
string	必须是 String 类型（默认值）
number	必须是 Number类型
boolean	必须是 Boolean类型
method	必须是 Function类型
integer	必须是 number 类型和整数
float	必须是 number 类型和浮点数
array	必须是 Array，由 isArray 确定的数组。.
object	必须是Object 必须是类型而不是Array.isArray
date	值必须有效Date
url	必须是url 类型
hex	必须是 hex类型
regexp	必须是RegExp，在创建新RegExp时不生成异常的 实例 或 字符串
email	值必须存在于 enum中
any	可以是任何类型

参考地址

• ElememtUI：https://element.eleme.cn/#/zh-CN/component/form
• dt 猫：https://www.dtmao.cc/news_show_382522.shtml