element 表单正则校验

1. Non-empty check only

view

<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" style="text-align: left;">
			<el-form-item label="身份证" prop="idCard">
				<el-input v-model="ruleForm.idCard" clearable></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="tel">
				<el-input v-model="ruleForm.tel" clearable></el-input>
			</el-form-item>
			<el-form-item label="短信验证码" prop="telcode">
				<el-input v-model="ruleForm.telcode" clearable></el-input>
				<el-button @click.native.prevent="getTelCode" type="primary" >获取</el-button>
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input v-model="ruleForm.pwd" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click.native.prevent="submitForm" :loading="loading">提交</el-button>
				<el-button  @click.native.prevent="resetForm" >重置</el-button>
			</el-form-item>
</el-form>

js

return {
          ruleForm: {
            idCard: '',
            tel: '',
            telcode:'',
            pwd: '',
          },
          loading:false,
          rules:{
				idCard:[
						{
						required:true,
		      			message:'身份证号不能为空',
		      			trigger:'blur'
						}
					],
				tel:[
						{
						required:true,
		      			message:'联系电话不能为空',
		      			trigger:'blur'
						}
					],
				telcode:[
					    {
					    required:true,
	      			    message:'短信验证码不能为空',
	      			    trigger:'blur'
					}
				],
				pwd:[
						{
						required:true,
		      			message:'密码不能为空',
		      			trigger:'blur'
						}
					],
			}
        }
      },

2. Non-empty + format check

view

<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" style="text-align: left;">
			<el-form-item label="身份证" prop="idCard">
				<el-input v-model="ruleForm.idCard" clearable></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="tel">
				<el-input v-model="ruleForm.tel" clearable></el-input>
			</el-form-item>
			<el-form-item label="短信验证码" prop="telcode">
				<el-input v-model="ruleForm.telcode" clearable></el-input>
				<el-button @click.native.prevent="getTelCode" type="primary" >获取</el-button>
			</el-form-item>
			<el-form-item label="密码" prop="pwd">
				<el-input v-model="ruleForm.pwd" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click.native.prevent="submitForm" :loading="loading">提交</el-button>
				<el-button  @click.native.prevent="resetForm" >重置</el-button>
			</el-form-item>
</el-form>

js

data() {
      	let idCardReg=(rule,value,callback)=>{
	     	this.ruleForm.idCard=value;
	      	if(this.ruleForm.idCard!=""){
	      		const reg=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
	      		if(reg.test(value)){
	      			return callback();
	      		}else{
	      			return callback(new Error('身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X'));
	      		}
	      	}else{
	      		return callback(new Error('请输入身份证'))
	      	}
	    } 
        return {
          ruleForm: {
            idCard: '',
            tel: '',
            telcode:'',
            pwd: '',
          },
          loading:false,
          rules:{
				idCard:[
						{
		      			trigger:'blur',
		      			validator:idCardReg,
						}
					],
				tel:[
						{
						required:true,
		      			message:'联系电话不能为空',
		      			trigger:'blur'
						}
					],
				telcode:[
					    {
					    required:true,
	      			    message:'短信验证码不能为空',
	      			    trigger:'blur'
					}
				],
				pwd:[
						{
						required:true,
		      			message:'密码不能为空',
		      			trigger:'blur'
						}
					],
			}
        }
      },