element 表单正则校验

超、凢脫俗 2022-04-13 04:48 289阅读 0赞

**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**

**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'
    						}
    					],
    			}
            }
          },