【element 验证步骤，自己做的笔记，记录一下】

util.js

/**
   * 正则验证
   */
  isEmpty(rule, value, callback) {
    if (value === "") {
      return callback(new Error("不能为空"));
    }
    callback();
  },
  limitChinese(rule, value, callback) {
    var pattern = /^[\u4e00-\u9fa5]+$/;
    if (!pattern.test(value)) {
      return callback(new Error("只能输入中文"));
    }
    callback();
  },
  positiveInteger(rule, value, callback) {
    var pattern = /^[+]{0,1}(\d+)$/;
    if (!pattern.test(value)) {
      return callback(new Error("只能输入正整数"));
    }
    callback();
  },
  cantChineseNumbers(rule, value, callback) {
    var pattern = /^[A-Za-z\s\`\~\!\#\$\%\^\&\*\(\)\_\[\]{\}\\\|\;\'\'\:\"\"\,\.\/\<\>\?]+$/g;
    if (!pattern.test(value)) {
      return callback(new Error("只能输入英文和符号"));
    }
    callback();
  },
  // /^1[3|4|5|8][0-9]\d{4,8}$/
  iphone(rule, value, callback) {
    var pattern = /^1[3|4|5|8][0-9]\d{4,8}$/;
    if (!pattern.test(value)) {
      return callback(new Error("不是完整的11位手机号或者正确的手机号前七位"));
    }
    callback();
  }

2.

:rules="rules"
ref="form"

prop
<el-form-item prop="yhmc" label="用户名" style="width:100%;">
    <el-input v-model="form.yhmc" placeholder="请输入用户名"></el-input>
</el-form-item>

 

3

data() {
    var isEmpty = this.util.isEmpty;
    var limitChinese = this.util.limitChinese;
    var iphone = this.util.iphone;
    return {
      rules: {
        yhmc: [{ required: true, validator: limitChinese, trigger: "blur" }],
        yhmm: [{ required: true, validator: isEmpty, trigger: "blur" }],
        bmbh: [{ required: true, validator: isEmpty, trigger: "blur" }],
        yhsj: [{ required: true, validator: iphone, trigger: "blur" }],
        roleIds: [{ required: true, validator: isEmpty, trigger: "blur" }],
        sfyx: [{ required: true, validator: isEmpty, trigger: "blur" }]
      }
    };
  },

4.

 onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$emit("addSubmit", this.form);
        } else {
          console.log("error submit!!");
        }
      });
    },