Vue form表单验证

el-form 标签添加 ref、rules

 <el-form ref="form" :inline="true" :model="form" :rules="rules">

el-form-item 添加prop

 <el-form-item label="姓名" prop="name">
     <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
 </el-form-item>

提交按钮传递form对象

 <el-button
    type="primary"
    :disabled="false"
    @click="submit('form')">提交</el-button>

data编写验证规则, 也可以使用 validator 自定义规则函数

    // 座机及手机号
 const checkPhone = (rule, value, callback) => {
     const phone = /^1[3|4|5|7|8][0-9]\d{8}$/
     const phone1 = /^(\d{3,4}-)?\d{7,8}$/
     if (value && (!phone.test(value) && !phone1.test(value))) {
        callback(new Error('请输入正确的电话号码'))
     } else {
        callback()
      }
   },
  data() {
    return {
      rules: {
      Phone: [
          { required: false, validator: checkPhone, trigger: 'blur' },
          {
            type: 'string',
            required: true,
            message: '请输入电话号码',
            trigger: 'blur'
          }
        ],
        address: [
          {
            type: "string",  // 输入类型
            required: true,  // 是否必填项
            message: "请输入住址",
            trigger: "blur",
          },
        ],
      },
    }
  },

提交请求前验证- - - 收工

    submit(form) {
      const set = this.$refs
      set[form].validate((valid) => {
        if (valid) {
           axios......
        }
      })
    },

附加 : 同样我们也可以在 el-form-item 标签上添加验证规则，
需要区别的是如果有额外的自定义规则,不同于上面对手机号码的验证方式，
该验证规则编写在method方法中

<el-form-item label="证件号码" prop="regApplyCardNum"
   :rules="[ {validator:validateIdCard,trigger:'blur'},
   { type: 'string', required: true, message: '请输入证件号码', trigger: 'blur'}]">
   <FormInput v-model="form.regApplyCardNum" placeholder="请输入证件号码" />
</el-form-item>


method:{
  validateIdCard(rule, value, callback) {
      if (this.form.regNationality === '1' && this.form.regApplyCardType === '1') {
        if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/.test(value)) {
          callback(new Error('请输入正确的中国居民身份证号'))
        }
      }
      if (this.form.regNationality === '1' && this.form.regApplyCardType === '2') {
        if (!/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/.test(value) || !/^[0-9]{8}$/.test(value)) {
          callback(new Error('请输入正确的港澳台居住证号'))
        }
      }
      if (this.form.regNationality === '1' && this.form.regApplyCardType === '2') {
        if (!/^[a-zA-Z]{5,17}$/.test(value) || !/^[a-zA-Z0-9]{5,17}$/.test(value)) {
          callback(new Error('请输入正确的护照号码'))
        }
      }
      callback()
    },
}

一小部分正则：

/^[\u4e00-\u9fa5]+$/gi   // 只允许输入汉字

/^[A-Za-z_\-]+$/ig			// 只允许输入大小写字母下划线

/[a-zA-Z0-9]$/			// 只允许输入大小写字母和数字