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-buttontype="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.$refsset[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]$/			// 只允许输入大小写字母和数字