JavaScript正则表达式——【小案例】手机号_邮箱_用户名_身份证

最新推荐文章于 2023-02-21 10:09:55 发布

喋喋小菜鸡

最新推荐文章于 2023-02-21 10:09:55 发布

阅读量469

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/DebbyOctober/article/details/108458157

版权

案例1：验证手机号要求：手机号必须是11位数且都是以1开头，手机号的第二位为：3 4 5 6 7 8步骤：①获取id②正则方法③条件判断<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> Tel:<input type="text" id="userTel">

摘要由CSDN通过智能技术生成

案例1：验证手机号
要求：手机号必须是11位数且都是以1开头，手机号的第二位为：3 4 5 6 7 8
步骤：
①获取id
②正则方法
③条件判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Tel:<input type="text" id="userTel"><span></span>
		<br><br>
		
		UserName:<input type="text" id="userName"><span></span>
		<br><br>
		
		Email:<input type="text" id="userEmail"><span></span>
		<br><br>
		
		身份证:<input type="text" id="usernumber"><span></span>
		
		<script>
		var userTel = document.getElementById("userTel");

        userTel.onblur = function(){

        var regTel = /^1[3-8]\d{9}$/;
        if(  regTel.test(this.value)   ){
        this.nextElementSibling.innerHTML = "手机号正确";
        }else{
        this.nextElementSibling.innerHTML = "手机号输入有误";
        }

      }
		</script>
	</body>
</html>

注：onblur事件的定义和用法：

onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框。
提示：onblur 相反事件为 onfocus 事件。

案例2：验证用户名（验证密码和用户名相似）
要求：用户名可以包含数字、字母、下划线；位数必须是6-12位
步骤：
①获取id
②正则方法
③条件判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Tel:<input type="text" id="userTel"><span></span>
		<br><br>
		
		UserName:<input type="text" id="userName"><span></span>
		<br><br>
		
		Email:<input type="text" id="userEmail"><span></span>
		<br><br>
		
		身份证:<input type="text" id="usernumber"><span></span>
		
		<script>
		var userName = document.getElementById("userName");

        userName.onblur = function(){

        var regName = /^\w{6,12}$/;
        if( regName.test(this.value) ){
        this.nextElementSibling.innerHTML = "用户名正确";
        }else{
        this.nextElementSibling.innerHTML  = "用户名输入有误";
     }
  }
		</script>
	</body>
</html>

案例3：验证邮箱
要求： @前可以有数字、字母、下划线，@后是1-6位的数字、字母或下划线，
“.”需要转义，结尾可以是任意的2-3位数（如：com/cn/cc ……）
步骤：
①获取id
②正则方法
③条件判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Tel:<input type="text" id="userTel"><span></span>
		<br><br>
		
		UserName:<input type="text" id="userName"><span></span>
		<br><br>
		
		Email:<input type="text" id="userEmail"><span></span>
		<br><br>
		
		身份证:<input type="text" id="usernumber"><span></span>
		
		<script>
		var userTel = document.getElementById("userTel");

        userTel.onblur = function(){

        var regTel = /^1[3-8]\d{9}$/;
        if(  regTel.test(this.value)   ){
        this.nextElementSibling.innerHTML = "手机号正确";
        }else{
        this.nextElementSibling.innerHTML = "手机号输入有误";
        }

      }
		</script>
	</body>
</html>

注：onblur事件的定义和用法：

onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框。
提示：onblur 相反事件为 onfocus 事件。

案例2：验证用户名（验证密码和用户名相似）
要求：用户名可以包含数字、字母、下划线；位数必须是6-12位
步骤：
①获取id
②正则方法
③条件判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Tel:<input type="text" id="userTel"><span></span>
		<br><br>
		
		UserName:<input type="text" id="userName"><span></span>
		<br><br>
		
		Email:<input type="text" id="userEmail"><span></span>
		<br><br>
		
		身份证:<input type="text" id="usernumber"><span></span>
		
		<script>
		//zhang_san@163.com
//zhangsan123@qq.cn
//zhan1ab@126.cc


//   zhangsan_123abC    @   163.com
    var userEmail = document.getElementById("userEmail");

     userEmail.onblur = function(){

    var regEmail = /^\w+@\w{1,6}\.[0-9a-zA-Z]{2,3}$/;

    if( regEmail.test(this.value)  ){
        this.nextElementSibling.innerHTML = "邮箱正确";
    }else{
        this.nextElementSibling.innerHTML = "邮箱输入有误";
    }
}
		</script>
	</body>
</html>

案例4：验证身份证（由于省份不同，证件前半段数字无法作限定）
要求：必须是18位数，前17位必须是数字，最后一位可以为数字，也可以为X

步骤：
①获取id
②正则方法
③条件判断
注：[\dX]这里的中括号表示，可以为数字，也可以为X

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Tel:<input type="text" id="userTel"><span></span>
		<br><br>
		
		UserName:<input type="text" id="userName"><span></span>
		<br><br>
		
		Email:<input type="text" id="userEmail"><span></span>
		<br><br>
		
		身份证:<input type="text" id="usernumber"><span></span>
		
		<script>
        var usernumber = document.getElementById("usernumber");

        usernumber.onblur = function(){

        var regnumber = /^\d{17}[\dX]$/;

      if(  regnumber.test(this.value)  ){
        this.nextElementSibling.innerHTML = "身份证正确";
      }else{
        this.nextElementSibling.innerHTML = "身份证输入有误";
    }
}
		</script>
	</body>
</html>

喋喋小菜鸡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript正则表达式——【小案例】手机号_邮箱_用户名_身份证

案例1：验证手机号要求：手机号必须是11位数且都是以1开头，手机号的第二位为：3 4 5 6 7 8步骤：①获取id②正则方法③条件判断<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> Tel:<input type="text" id="userTel"&gt
复制链接

扫一扫