【JavaWeb】JavaScript_js中的正则表达式及应用

最新推荐文章于 2023-03-02 10:23:07 发布

Enjoy96

最新推荐文章于 2023-03-02 10:23:07 发布

阅读量363

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79116649

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.在js中正则表达式的写法：

var reg = /正则表达式/;

2.正则表达式中校验字符串是否符合正则规则的方法：test()

if(reg.text(str)){

}

3.常用的语法：

（1）X*：表示X字符出现0次或多次
（2）X?：表示X字符出现1次或0次
（3）X+：表示X字符出现1次或多次 (多次)

例如：邮箱:zhangsan@istone.com.cn 数字或字母+@数字或字母+(\.大小写字母{2,3}){1,2}
（4）X{n}：X字符恰好出现n次
（5）X{n,}：X字符至少出现n次
（6）X{n,m}：X字符至少出现n次,但是不超过m次

4.js中的两种匹配情况：

（1）不完全匹配：只要字符串的部分内容符合正则规则，就会被校验成功

（2）完全匹配：加上边界匹配器

以“^”开头——>以“$”结尾

练习：使用正则表达式校验表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用正则表达式校验表单</title>
<!--
正则规则：
	用户名:4-14位的数字或者字母组成
    密码:  6-16位的数字或者字母组成
    确认密码:两次输入的密码必须一致
    邮箱:数字或者字母@数字或者字母.(com/cn/.con.cn/Istone.com.cn) 
-->
<script type="text/javascript">
	//校验用户名
	function checkUser(){
		
		//获取用户输入的内容
		var user = document.getElementById("user").value ;
		//获取id="nameTip"所在的span标签对象
		var nameTip = document.getElementById("nameTip") ;
		
		//定义用户名的规则:用户名:4-14位的数字或者字母组成
		var reg = /^[a-zA-Z0-9]{4,14}$/ ;
		
		//开始校验
		if(reg.test(user)){
			//成功了,
			//设置span标签对象的innerHTML属性,进行提示
			nameTip.innerHTML = "用户名正确,符合正则规则".fontcolor("green") ;
			return true ;
		}else{
			//失败
			nameTip.innerHTML ="用户名不正确,不符合正则规则".fontcolor("red") ;
			return false ;
		}
		
	}
	
	//校验密码
	function checkPwd(){
		//获取输入的密码的内容
		var userPwd = document.getElementById("userPwd").value ;
		//获取id="pwdTip"所在的span标签对象
		var pwdTip = document.getElementById("pwdTip") ;
		
		//定义密码的正则规则: 密码:  6-16位的数字或者字母组成
		var reg = /^[a-zA-Z0-9]{6,16}$/ ;
		//校验
		if(reg.test(userPwd)){
			pwdTip.innerHTML = "密码输入正确,符合正则规则".fontcolor("green");
			return true ;
		}else{
			pwdTip.innerHTML = "密码输入不符合正则规则".fontcolor("red");
			return false ;
		}
	}
	
	//确认密码
	function checkRePwd(){
			//获取输入的密码的内容
		var userPwd = document.getElementById("userPwd").value ;
		//在获取确认密码框中的内容
		var rePwd = document.getElementById("rePwd").value ;
		
		//在获取id="rePwdTip"的span标签对象
		var rePwdTip = document.getElementById("rePwdTip") ;
		//两次输入密码必须一致
		if(userPwd==rePwd){
			rePwdTip.innerHTML = "两次密码输入一致".fontcolor("green");
			return true ;
		}else{
			rePwdTip.innerHTML = "两次密码输不一致".fontcolor("red");
			return false ;
		}
	}
	
	//邮箱的校验
	function checkEmail(){
		//获取邮箱的内容
		var email = document.getElementById("email").value ;
		//获取id="emailTip"所在的span标签对象
		var emailTip = document.getElementById("emailTip") ;
		
		//定义邮箱的正则规则:数字或者字母@数字或者字母(.com/.cn/.con.cn/Istone.com.cn
		var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-z]{2,3}){1,2}$/ ;
		
		//校验
		if(reg.test(email)){
			emailTip.innerHTML = "邮箱符合正则规则".fontcolor("green") ;
			return true ;
			
		}else{
			emailTip.innerHTML = "邮箱不符合正则规则,请重新输入".fontcolor("red");	
			return false ;
		}

	}
	
	
	//最终提交表单的时候,有一个表单中有问题,就不能提交成功,所以整体在进行校验
	function checkAll(){
		//需要分别知道:用户名,密码,确认密码,邮箱是否成功了
		if(checkUser() && checkPwd() && checkRePwd() &&checkEmail()){
			return true ;
		}else{
			return false ;
		}	
	}
</script>
</head>

<body>
<!--form表单的onsubmit事件,如果返回时true,表示提交表单,false,不提交表单-->
<form action="03.后台页面.html" method="post" οnsubmit="return checkAll()">
用户名:<input type="text" id="user" οnblur="checkUser()" /><span id="nameTip"></span><br />
密  码:<input type="password" id="userPwd" οnblur="checkPwd()" /><span id="pwdTip"></span><br/>
确认密码:<input type="password" id="rePwd" οnblur="checkRePwd()" /><span id="rePwdTip"></span><br/>
邮  箱:<input type="text" id="email" οnblur="checkEmail()" /><span id="emailTip"></span><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

效果：