el-form表单校验

1、局部校验

        填写时校验

在<el-form>标签中使用:rules="rules"

rules是表单验证规则，为object对象。

rules: {
        payMode: [//el-form-item标签中的prop
          { required: true, message: "请选择支付方式", trigger: "change" }
        ],
        allongeQuantity: [
          { required: true, message: "请输入粘单张数", trigger: "blur" },
          {
            validator: (rule, value, callback) => {//自定义校验器
              if (/^(?:[1-9]\d*|0)$/.test(value) == false) {
                callback(new Error("请输入正整数"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }

在rules中对各字段写校验规则，可以自定义校验器validator，校验器也可以写成

var checkNumber = (rule, value, callback) => {//自定义校验器
              if (/^(?:[1-9]\d*|0)$/.test(value) == false) {
                callback(new Error("请输入正整数"));
              } else {
                callback();
              }
            },
...
validator:checkNumber

2、整体校验

        提交时校验

在el-form中设置ref

校验方法

submitForm(formName) {
        this.$refs[formName].validate((valid,object) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

方法名：validate

说明：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

参数：Function(callback: Function(boolean, object))

object可不传