vue+elementui验证(elementui所提供的验证规则就不多阐述了,直接上你们业务需求需要的,注:不提供正则表达式)

1.DOM

<el-form-item label="联系电话" label-width="100px" prop="contactPhone">
	<el-input v-model="form.contactPhone" style="width: 330px;" placeholder="请输入联系电话"></el-input>
</el-form-item>

2.JS

2.1验证规则(这个验证规则在data()下边声明,注:return{}之外)

/*手机号码验证*/
           	var checkphoneNum=(rule,value,callback)=>{
           		let patter=new RegExp("^(13[0-9]|14[5,7,9]|15[0-3,5-9]|16[6]|17[0,1,3,5,6,7,8]|18[0-9]|19[8|9])\\d{8}$");
            	if(value==""){
            		return callback(new Error('手机号码不能为空'));
            	}else if(!patter.test(value)){
            		return callback(new Error('手机号码格式不正确'));
            	}else{
            		callback();
            	}
           	};

2.2return中定义规则

rules:{
	contactPhone需要与DOM中prop值对应				
contactPhone:[{validator:checkphoneNum,trigger: 'focus'}]
}

猜你喜欢

转载自blog.csdn.net/Hkweb_/article/details/80943322