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.验证表单对象中表格里的值（表格内字段单独校验）

<template>
  <div class="data-table-edit">
    <el-form ref="form" :model="tableData" :rules="rules" size="small" label-width="100px">
      <div class="sub-head-title">基本信息</div>

      <el-form-item label="表名" prop="name">
        <el-input
          v-model="tableData.name"
          maxlength="20"
          show-word-limit
          placeholder="请填写表名"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="cnName">
        <el-input v-model="tableData.cnName" placeholder="请填写名称"></el-input>
      </el-form-item>
      <el-form-item label="数据库类型" prop="databaseType">
        <el-select
          v-model="tableData.databaseType"
          placeholder="请选择数据库类型"
          style="width: 100%">
          <el-option label="日志" value="LOG"></el-option> </el-select
      ></el-form-item>
      <el-form-item label="表结构" prop="fields">
        <qz-pro-table
          ref="table"
          border
          :data-source="tableData.fields"
          :pageVisible="false"
          class="space0">
          <qz-table-column prop="name" label="名称" min-width="100" show-overflow-tooltip>
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="'fields.' + $index + '.name'" :rules="rules.name">
                <el-input v-model="row.name" placeholder="名称" size="small"></el-input
              ></el-form-item>
            </template>
          </qz-table-column>
          <qz-table-column prop="cnName" label="列名" min-width="100" show-overflow-tooltip>
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="'fields.' + $index + '.cnName'" :rules="rules.cnName">
                <el-input v-model="row.cnName" placeholder="列名" size="small"></el-input>
              </el-form-item>
            </template>
          </qz-table-column>
          <qz-table-column prop="type" label="字段类型" min-width="120" show-overflow-tooltip>
            <template slot-scope="{ row, $index }">
              <el-form-item :prop="'fields.' + $index + '.type'" :rules="rules.type">
                <el-select v-model="row.type" placeholder="字段类型" size="small">
                  <el-option
                    :label="item.type"
                    :value="item.type"
                    :index="item.type"
                    v-for="item in fieldType[tableData.databaseType]"></el-option>
                </el-select>
              </el-form-item>
            </template>
          </qz-table-column>
        </qz-pro-table>
      </el-form-item>
      <div class="text-right">
        <el-button type="primary" @click="save" size="small" :loading="saveLoading">确定</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    const isENValue = (value) => {
      return !new RegExp('^[a-zA-Z_][a-zA-Z0-9_]*$').test(value);
    };
    const validateTableName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名称'));
      } else {
        if (isENValue(value)) {
          callback(new Error('此处只支持英文字母'));
        }
        callback();
      }
    };
    const validateFields = (rule, value, callback) => {
      if (!value || value.length === 0) {
        callback(new Error('请填写表结构'));
      } else {
        value?.forEach((item) => {
          if (!item.name || !item.cnName || !item.type) {
            callback(new Error('请填写完整表结构'));
          }
        });
        callback();
      }
    };
    return {
      rules: {
        name: [
          { required: true, message: '请填写名称', trigger: 'blur' },
          { validator: validateTableName, trigger: 'blur' }
        ],
        cnName: [{ required: true, message: '请填写列名', trigger: 'blur' }],
        databaseType: [{ required: true, message: '请选择数据库类型', trigger: 'blur' }],
        type: [{ required: true, message: '请选择字段类型', trigger: 'blur' }],
        fields: [
          { required: true, message: '请填写表结构', trigger: 'blur' },
          { validator: validateFields, trigger: 'blur' }
        ]
      },
      tableData: {
        fields: [
          {
            name: '',
            cnName:'',
            type:null
          }
        ]
      },
      saveLoading: false,
    };
  },
  methods: {
    save() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          console.log('表单验证通过');
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.data-table-edit {
  /deep/.qz-pro-table .el-table td:first-of-type {
    padding-left: 0 !important;
  }
  /deep/.qz-pro-table .el-table--border .el-table__cell:first-child .cell {
    padding-left: 5px !important;
  }
  /deep/.el-table .el-table__body-wrapper .cell {
    padding: 0 5px;
  }
  .el-checkbox {
    margin-left: 10px;
  }
  .el-checkbox-group {
    .el-checkbox {
      margin-left: 0px;
      margin-right: 10px;
      /deep/.el-checkbox__label {
        padding-left: 3px;
      }
    }
  }
  .qz-pro-table {
    .el-form-item--small.el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>

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

//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']

7. 清空el-input校验提示

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