小问题记录 用vue+element搭建项目时 表单校验问题

今日一位网友和我交流vue+element做的表单校验 校验用户名不生效问题

问题如下  点击注册按钮时 校验不成功  无返回  排查之后发现是用户名校验问题 

在element校验方法里排查 发现是校验方法写的问题

记录一下解决方法

html部分
 

 <el-form-item label="用户名" prop="userName">
       <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
 </el-form-item>

data部分：

 var userName = (rule, value, callback) => {
         if (!value) {
           return callback(new Error('用户名不能为空!!'))
         }
        callback();   //这里校验后面必须callback
}

 ruleForm: {
         userName: ''
   },

 rules: {
      userName: [{ required: true, trigger: 'blur', validator: userName}]
   };

js部分

submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');   //问题 这里不生效 并没有校验成功
          } else {
            console.log('error submit!!');
            return false;
          }
        });
},

最后发现element校验后面必须跟callback，不然不生效