ant design vue 实现手机号身份证中文校验邮箱校验

1，实现手机号校验在data 中定义一个校验手机号的方法let validatorPhone=(rule,value,callback)=>{// 如果为空值，就抛出错误if(!value){callback();}else{// 正则判断手机号格式的格式，正则判断失败抛出错误，否则直接callback()if(!/^1[2-9]\d{9}$/.test(value)){

不忘初心ing

4986人浏览 · 2021-07-27 18:57:54

不忘初心ing · 2021-07-27 18:57:54 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^