对form表单中必填项进行验证，自定义验证规则

<el-form status-icon :model="popRuleForm" :rules="rules" ref="popRuleForm">
        <el-form-item label="供应商：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="popRuleForm.name" autocomplete="off" placeholder="输入/模糊搜索"></el-input>
        </el-form-item>
        <el-form-item label="地址：" :label-width="formLabelWidth" prop="address">
          <el-input v-model="popRuleForm.address" autocomplete="off" placeholder="请输入供应商地址"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" :label-width="formLabelWidth" prop="contact">
          <el-input v-model="popRuleForm.contact" autocomplete="off" placeholder="请输入供应商联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="popRuleForm.phone" autocomplete="off" placeholder="请输入供应商联系电话">
          </el-input>
        </el-form-item>
      </el-form>

普通校验

地址、联系人直接使用 rules中的规则校验

rules: {
          name: [{required: true, message: '请输入供应商名称', trigger: 'blur'}],
          address: [{required: true, message: '请输入供应商地址', trigger: 'blur'}],
          contact: [{required: true, message: '请输入供应商联系人', trigger: 'blur'}],
          phone: [{required: true, validator: checkPhone, trigger: 'blur'}]
        },

校验手机号码

data() {
      let checkPhone = (rule, value, callbacks) => {
        if (!value) {
          callbacks(new Error('电话号码不能为空'))
        }
        if (check.validateTel(value)) {
          callbacks()
        } else {
          callbacks(new Error('电话号码格式不正确'))
        }
      };
}

validateTel()函数是校验手机号是否合法的

const TEL_REGEXP = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/; // 手机号码
const EMAIL_REGEXP = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/; 
 // 电子邮箱地址

export default {
  validateTel: tel => {
    if (TEL_REGEXP.test(tel)) {
      return true;
    }
    return false;
  },
    validateEmail: email => {
    if (EMAIL_REGEXP.test(email)) {
      return true;
    }
    return false;
  }
}

自定义表单检验方式也可以校验选择框、表格。

检验可新增编辑的表格

<el-form-item label="出货产品：" prop="products">
            <el-table :data="ruleForm.products" class="products" border style="width: 100%;" max-height="200">
              <el-table-column label="NO" :resizable="false" min-width="20%">
                <template slot-scope="scope">{{scope.$index+1}}</template>
              </el-table-column>
              <el-table-column label="产品型号" :resizable="false">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.model" placeholder="输入产品型号"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="出货数量" :resizable="false">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.number" placeholder="输入出货数量"
                            oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="" :resizable="false">
                <template slot-scope="scope">
                  <el-button type="text" :disabled="ruleForm.products.length < 2"
                             @click.native.prevent="handleDelete(scope.$index)"><i
                    class="el-icon-delete-solid delete"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button type="text" @click="addRow()"><i class="el-icon-circle-plus"></i> 添加</el-button>
          </el-form-item>

let checkProduct = (rule, value, callbacks) => {
        if (value.length) {
          for (let i = 0; i < value.length; i++) {
            if (value[i].model == "" || value[i].number == "") {
              callbacks(new Error('请填写出货产品信息'))
            } else {
              callbacks()
            }
          }
        } else {
          callbacks(new Error('请添加出货产品'))
        }
      };

判断数组不为空，且数组中数据不为空

rules: {
          
          products: [{required: true, validator: checkProduct, trigger: 'blur'}],
        },

上述方法校验数组时发现一个bug，如果数组中某条数据通过校验后，再新增数据时，默认是校验通过的；或一次添加两行，某一行校验过后，另一行默认校验通过的。如何解决？？

 

如上图在项目中需要验证的表格类型是点击添加新增一行，失去焦点自动保存，所以需要对表格的每个字段进行验证，也就需要为每个字段都绑定 :prop   :rules属性

解决方法，看代码

<el-table-column label="产品型号" :resizable="false">
                <template slot-scope="scope">
                  <el-form-item :prop="'products.'+scope.$index+'.model'" :rules="rules.model">
                    <el-input v-model="scope.row.model" placeholder="输入产品型号"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="出货数量" :resizable="false">
                <template slot-scope="scope">
                  <el-form-item :prop="'products.'+scope.$index+'.number'" :rules="rules.number">
                    <el-input v-model="scope.row.number" placeholder="输入出货数量"
                              oninput="value=value.replace(/[^\d]/g,'')"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>

关键处在

:prop="'products.'+scope.$index+'.model'"

最后在rules中添加验证就可以了

rules: {
          model: [{required: true, message: '请输入产品型号', trigger: 'blur'}],
          number: [{required: true, message: '请输入出货数量', trigger: 'blur'}],
        },

发现bug，解决bug，少写bug