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

最新推荐文章于 2024-10-06 16:21:57 发布

渣男

最新推荐文章于 2024-10-06 16:21:57 发布

阅读量5k

点赞数 6

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_44670249/article/details/117660635

版权

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

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

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

required
必填

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

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

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

max, min, len

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

enum
只能输入在备选数组中的值,一般这种就用select或者radio了，很少用到
```
{ type: 'enum', enum: ['admin', 'user', 'guest'] },
```

Whitespace
不能全部都是空格

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

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

自定义校验

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'
  };

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

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