vue表单效验详细描述

1，在el-form上绑定rules

   <el-form ref="forms" :rules="rules"  :model="formInfo">
    // 表单进行效验一定要配置prop 不配置prop则不进行校验
         <el-form-item label="名称" prop="name">
              <el-input
                v-model="formInfo.name"
                placeholder="名称"
                size="small"
              />
            </el-form-item>
            <el-form-item label="分数" prop="score">
              <el-input
                v-model="formInfo.score"
                clearable
                size="small"
              />
            </el-form-item>
          </el-form>

2，在data里面添加校验规则（这里的命名和prop绑定的一致）

data(){
 //自定义校验
   const valScore= (rule, value, callback) => {
      if (!(this.formInfo.score>0&&this.formInfo.score<100)) {
        callback(new Error("请输入正确的分数"));
      } else {
        callback();
      }
    }
 return{
   rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        score: [
          //自定义效验
          { required: true, validator: valScore, trigger: "blur" }
        ]
      }, 
 }
}

3。提交表单效验

//通过表单的ref属性 获取效验
this.$refs['forms'].validate(valid => {
  //vaild为true则效验通过 为false效验未通过
})

4,清除校验

this.$refs['forms'].clearValidate()

5，对某一个输入框进行效验

//单独对名称进行校验
this.$refs["forms"].validateField(["name"], (Error) => {//校验结果})