vue element ui表单校验篇

本文讲述Vue element 关于表单校验中自定义表单校验，怎么校验表格中的表单，怎么校验表单数组循环，对象中的数据

1. 自定义验证表单中某个值

//html
<el-form :model="dataInfo" :rules="rules" ref="form"  class="demo-form" >
  <el-form-item label="名称" prop="name">
    <el-input size="small" v-model="dataInfo.name" ></el-input>
	</el-form-item>
</el-form>

//数据
data(){
  var checkName = (rule, value, callback) => {
      if (this.dataInfo.name == 'a') {
        callback(new Error("名字態为a！"));
      } else {
        callback();
      }
    };
  return {
    dataInfo: {name:''}
    rules:{
      name: [
        { required: true, message: "请输入名称", trigger: "blur" },
        { validator: checkName, trigger: "blur" }
      ],
    }
  }
}

2.验证表单对象中对象的某个属性

在vue element里，如果调用了表单的resetFields方法，这个方法可能会报一个警告（说prop期望是一个字符串得到的是一个布尔，这是element内部处理的结果），这时要用下面那个方法

//html
<el-form :model="dataInfo" :rules="rules" ref="form"  class="demo-form" >
  <el-form-item label="名称" prop="user.age">
    <el-input size="small" v-model="dataInfo.user.age" ></el-input>
	</el-form-item>
</el-form>

//数据
data(){
  var checkAge = (rule, value, callback) => {
      if (Number(this.dataInfo.user.age)<18) {
        callback(new Error("你还未成年不能注册哦！"));
      } else {
        callback();
      }
    };
  return {
    dataInfo: {
      user:{
        age:''
    	}
    }
    rules:{
      'user.age': [
        { validator: checkAge, trigger: "blur" }
      ],
    }
  }
}

3.验证表单对象中对象的某个属性

//html
<el-form :model="dataInfo" :rules="rules" ref="form"  class="demo-form" >
  //prop必须是数据源里存在的值，触发该prop规则时去判断v-model绑定的值
  <el-form-item label="名称" prop="_age">
    <el-input size="small" v-model="dataInfo.user.age" ></el-input>
	</el-form-item>
</el-form>

//数据
data(){
  var checkAge = (rule, value, callback) => {
      if (Number(this.dataInfo.user.age)<18) {
        callback(new Error("你还未成年不能注册哦！"));
      } else {
        callback();
      }
    };
  return {
    dataInfo: {
      user:{
        age:''
    	}
      _age:''
    }
    rules:{
      _age: [
        { validator: checkAge, trigger: "blur" }
      ],
    }
  }
}

4.验证表单对象中表格里的值（表格整体校验）

//html
<el-form :model="dataInfo" :rules="rules" ref="form"  class="demo-form" >
  //prop必须是数据源里存在的值，触发该prop规则时去判断v-model绑定的值
  <el-form-item label="名称" prop="exprs">
    <el-table :data="dataInfo.exprs" border>
      <el-table-column prop="name" label="识别算法">
        <template slot-scope="{ row }">
          <el-select v-model="row.name">
            <el-option v-for="(item3, index3) in builtInFunction" :label="item3.name" :value="item3.value" :key="index3"></el-option>
          </el-select>
        </template>
    </el-table-column>
	</el-form-item>
</el-form>

//数据
data(){
  return {
    dataInfo: {
      exprs:[{name:''}]
    }
    rules:{
      exprs: [
        { required: true, message: "请输入名称", trigger: "blur" }
      ],
    }
  }
}

5.验证表单对象中循环数组

//html
<el-form :model="fromData" :rules="rules" ref="form"  class="demo-form" >
  <div v-for="(item, index) in fromData.sizeData" :key="index + '_size'" class="clearfix mt24">
　　　　<el-form-item class="fl" label="虚拟SKU" :prop="'sizeData.' + index + '.goods_sn'" :rules="sizeData.goods_sn" required>
　　　　　　<el-input v-model="item.goods_sn" autocomplete="off" placeholder="请输入SKU" style="width:200px;"></el-input>
　　　　</el-form-item>

　　　　<el-form-item class="fl" label="尺寸规格" :prop="'sizeData.' + index + '.size.type'" :rules="sizeData.size_type" required>
　　　　　　<el-input v-model="item.size.type" autocomplete="off" placeholder="请选择尺寸值，用英文逗号分隔" style="width:600px;"></el-input>
　　　　</el-form-item>
　　 </div>

</el-form>

//数据
data(){
  return {
    fromData: {
       sizeData: [
　　　　　　{
　　　　　　　　goods_sn: '',
　　　　　　　　size: ｛
　　　　　　　　　　type: ''
　　　　　　　　｝
　　　　　　}
　　　　],
    }   
    rules:{
      sizeData: {
　　　　goods_sn: [
　　　　　　{ required: true, message: '请输入SKU', trigger: ['change', 'blur'] },
　　　　　　{ validator: validateSku, trigger: ['change', 'blur'] }   // validateSku自定义检验规则，这不用介绍了
　　　　],
　　　　size_type: [  // 自定义键名
　　　　　　{ required: true, message: '请选择尺寸值，用英文逗号分隔', trigger: ['change', 'blur'] }
　　　　]
　　}
    }
  }
}

//注：这里踩了个坑，就是检验清空输入框会出现代码英文提示，这里最好就是将触发的多个事件名都写上，这样就只会出现我们自定义的提示，trigger: ['change', 'blur']

6. 清空el-input校验提示

this.$refs["form"].clearValidate();