vue+element 中表单验证，输入框、选择器及表格验证，自定义验证方法

对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;
  }
}

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

检验可新增编辑的表格

            
              
                
              
              
                
              
              
                
              
              
                
              
            
             添加
          

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属性

解决方法，看代码

关键处在

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

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

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

发现bug，解决bug，少写bug