element 表单正则校验

1. Non-empty check only

view

			
				
			
			
				
			
			
				
				获取
			
			
				
			
			
				提交
				重置
			

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