Vue自定义表单验证规则

第一步：在表单上添加 rules 属性，设置验证规则对象

第二步：在表单项设置 prop属性，声明验证的名称

第三步：设置验证规则对象

export default {
  data(){
    //验证规则函数
    let 验证规则函数 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码')); //验证未通过
      } else {
        callback(); //验证通过
        // 这里也可以发请求拿数据
      }
    };
    
    //返回数据
    return {
      rules: {
        name: [
          {validator: 验证规则函数, trigger: 'blur'}
        ],
      }
    }
  }
}

第四步：点击提交时验证

例：