element ui中form属性rules详解

 

username: [
      { required: true, message: '请输入用户名', transform: value => value ? value.trim() : '', trigger: 'blur' },
      { required: true, max: 10, message: '请输入10位以内字符', trigger: 'blur' }
    ],
// tranform  
//Function，钩子函数，表示在开始验证前对数据进行处理，然后再进行验证。

{type: 'string', required: true, message: '请输入必填项', transform(value){
    return value.trim();
}}

// validator
// Function，自定义校验函数，表示使用指定方法进行规则校验。
// 函数格式：function(rule, value, callback, source, options)
// 参数含义如下：

// rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称。
// value：当前校验字段的值。
// callback: 校验结束的回调函数，校验通过则不带参数，直接调用callback()，如果校验不通过，则带一个 // Error错误参数，如callback(new Error(‘具体的错误提示信息’))，关于Error的用法，参考这里
// source：调用校验的属性对象，不常用。
// options: 附加参数，不常用。

age: [
    {validator: validatorTrim, trigger: 'blur'}
]

validatorTrim: (rule, value, callback)=>{
    if (value?.trim()) {
        callback();
    } else {
        callback(new Error('不能为空或空白'));
    }
}

 

参考网址：ElementUI rules全功能介绍，同时也适用于avue中_gianttj的博客-CSDN博客