1,实现 手机号校验
在data 中定义一个校验手机号的方法

let validatorPhone=(rule,value,callback)=>{
        // 如果为空值,就抛出错误
        if(!value){
          callback();
        }else{
          // 正则判断手机号格式的格式,正则判断失败抛出错误,否则直接callback()
          if(!/^1[2-9]\d{9}$/.test(value)){
            callback(new Error("手机号格式不正确!"));
          }else{
            callback();
          }
        }
      }
// 在rules中直接引用
rules:{
	 phone:[{validator:validatorPhone,trigger:"change"}],
}

2,校验身份证号码
第一种:同上在data中定义一个校验身份证的方法

let validatorIdcord=(rule,value,callback)=>{
        // 如果为空值,就抛出错误
        if(!value){
          callback();
        }else{
          // 正则判断手机号格式的格式,正则判断失败抛出错误,否则直接callback()
          if(!/(^\d{18}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)){
            callback(new Error("身份证格式不正确!"));
          }else{
            callback();
          }
        }
      }
      
 // 在rules中直接引用
rules:{
	 idCard:[{validator:validatorIdcord,trigger:"change"}]
}

第二种:直接在rules 中定义

examIdCard:[{ required: true, message: '请输入体检人身份证号', trigger: 'blur' },
                  { pattern: '^\\d{6}(18|19|20)?\\d{2}(0[1-9]|1[012])(0[1-9]|[12]\\d|3[01])\\d{3}(\\d|[xX])$',
                message: '身份证号格式不正确'}],

3,校验中文以及中文符号
同上在data中定义一个校验中文和中文符号的方法

let checkData =(rule, value, callback)=>{
       if (value) {
         if (/[^\x00-\xff]/g.test(value)) {
           callback(new Error('不能输入汉字或中文符号!'));
         } else {
           callback();
         }
       }
       callback();
     }

// 直接在rules 中使用
rules:{
	workingTime:[
            { required:true,message:'请输入工作时间',trigger:'blur' },
            {validator:checkData,trigger:"change"}
          ],
}

4,校验邮箱


<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
		<input type="text" placeholder="请输入邮箱" id="email">
	</body>
	<script>
		email.onchange = function(){
			var email = this.value;
			var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
			if(reg.test(email)){
				alert("邮箱格式正确");
			}else{
				alert("邮箱格式不正确");
			}
		}
	</script>
</html>
`

Logo

前往低代码交流专区

更多推荐