ElementPlus 表单校验 async-validator 校验规则

Element 表单校验 async-validator 校验规则

Element表单校验用的是async-validator，git传送门。
或者看依赖包里的代码：
node_modules\async-validator\dist-types\index.d.ts

1. type
   很少用到，input框正常情况的值都是’string’,radio, checkbox也用不到这个
2. required
   必填

   {
         
          required: true, message: '请输入活动名称', trigger: 'blur' }
   

3. pattern
   正则校验,可以写自己需要的各种正则表达式

   {
         
         pattern: /^[a-zA_Z0-9]{2,10}$/, message:'请输入2到10位数字或字母', trigger: 'blur'},
   

4. max, min, len

   {
         
         max:2,min:10, message:'请输入2到10位数字或字母', trigger: 'blur'},
   {
         
          len: 10, message: '请输入10个字符', trigger: 'blur' }
   

5. enum
   只能输入在备选数组中的值,一般这种就用select或者radio了，很少用到

   {
         
          type: 'enum', enum: ['admin', 'user', 'guest'] },
   

6. Whitespace
   不能全部都是空格

   {
         
         whitespace: true, message: '不能为全空格', trigger: 'blur' }
   

7. fields
   如果需要验证深层对象属性，可以通过将嵌套规则指定给规则的fields属性来验证对象或数组类型的验证规则。
8. options
9. defaultField
10. transform

自定义校验

11. validator
    根据自己的逻辑判断，每种情况记得callback

    // 同步校验
    {
          
          
    	validator: (rule, value, callback) => {
          
          
        if (value === '') {
          
          
          callback(new Error('请输入密码'));
        } else {
          
          
          if (this.ruleForm.checkPass !== '') {
          
          
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
     },
     // 异步校验 我自己的项目中用到的场景：注册时查询账号是否被注册，手机号邮箱是否已绑定等
    {
          
          
        validator: async (rule, value, callback) => {
          
          
          try {
          
          
            await isExistUserName(value)
            callback()
          } catch {
          
          
            callback(new Error('该用户名已被使用'))
          }
        },
        trigger: 'change'
      };
    

12. asyncValidator
    异步校验，用途同上，写法不一样

    	asyncValidator(rule, value, callback) {
          
          
    		isExistUserName(value).then(() => {
          
          
    			callback()
    		}).catch((err) => {
          
          
    			callback(new Error(err))
    		})
    	}
    

码字不易，谢谢点赞~