javascript入门4

最新推荐文章于 2024-10-04 11:31:25 发布

陌上云幕

最新推荐文章于 2024-10-04 11:31:25 发布

阅读量61

点赞数 1

文章标签：正则表达式 linq html

本文链接：https://blog.csdn.net/weixin_67925322/article/details/124719136

版权

JavaScript 正则表达式表单验证用户输入边界匹配器

关键词由CSDN通过智能技术生成

1.正则表达式语法

(1)数量词相关的语法

           x:代表任意字符
           x+: 表示X字符串出现一次或者多次
           x*:表示X字符出现0次或者多次
           x?:表示X字符出现0次或者1次

(2)范围相关的语法

           X{n}: 表示X字符恰好出现n次
           X{n,}:表示X字符至少出现n次
           X{n,m}:表示X字符至少出现n次,但是不超过m次

(3)匹配字符相关的

           //X[a-z] :X字符可以是a-z中任何的一个小写字母字符
           //X[0-9] :x字符是一个数字字符
           //X[A-Za-z0-9_]:X字符可以是任意的大小字母均可或者数字或者_


正则表达式:有一个函数 test("接收用户输入的文本框的内容字符串")匹配是否成功

创建一个正则规则:var 正则对象名 = /书写正则语法/ ; 不完全匹配 (会出现安全漏洞!)
正则对象名.test(字符串),true,匹配成功,false,失败!


在Java语言中和在javascript中,如果要完全匹配,必须加入边界匹配器

^:以....开头
$:以...结尾

var 正则表达式对象 = /^ 正则语法 $/ ;

2.js的表单校验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js的表单校验</title>
		<!-- 
			正则规则(需求):
				用户名:4-14位的数字或者字母(不区分大小写)组成
				密码:6-10位的数字或者英文大小字母组成
				确认密码和密码一致
				邮箱:满足邮箱的格式
					数字或者字母@数字或者字母.com/.cm/.com.cn
						919081924@qq.com
								 @163.com
								 @Istone.com.cn
								 
								 
								 本身字符就是.  需要\. 转义
		 
		 -->
		
	</head>
	<body>
		<!-- 
			form表单一个事件:onsubmit:表单是否你能够提交成功!
			携带的值如果true,能够提交成功
			false,提交失败!
			
			
		 -->
		<form action="server.html" method="get" onsubmit=" return checkAll()"> 
			用户名:<input type="text" id="username"  placeholder="请输入用户名"                         onblur="checkUserName()" /><span id="userTip"></span><br/>
			密&ensp;&ensp;码:<input type="password" id="pwd" placeholder="请输入密码" onblur="checkPwd()" /><span id="pwdTip"></span><br/>
			确认密码:<input type="password" id="repwd" placeholder="两次密码一致" onblur="checkRepwd()" /><span id="repwdTip"></span><br/>
			邮&ensp;&ensp;箱:<input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()" /><span id="emailTip"></span><br/>
			<input type="submit" value="注册" />
		</form>
	</body>
	<script>
		//校验用户名
		function checkUserName(){
			//1)获取 用户名的内容  (id="username"的input标签对象同时获取内容)
			var username = document.getElementById("username").value ;
			//2)定义用户名的正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成
			var reg = /^[A-Za-z0-9]{4,14}$/ ;
			//3)获取 id="userTip"的span标签对象
			var span = document.getElementById("userTip") ;
			//4)正则表达式校验用户名的内容 username
			if(reg.test(username)){
				//成立
				span.innerHTML = "√".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "×".fontcolor("red") ;
				return false ;
			}
			
		}
		
		//校验密码
		function checkPwd(){
			//1)获取密码输入框的内容 dom操作
			var pwd = document.getElementById("pwd").value;
			//2)密码正则:6-10位的数字或者英文大小字母组成
			var reg = /^[A-Za-z0-9]{6,10}$/
			//3)获取id="pwdTip"所在的span标签对象
			var span = document.getElementById("pwdTip") ;
			
			//4)正则校验
			if(reg.test(pwd)){
				//成立
				span.innerHTML = "密码格式满足".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "不符合格式".fontcolor("red") ;
				return false ;
			}
		}
		
		//校验确认密码
		function checkRepwd(){
			//1)获取密码框的内容
			var pwd = document.getElementById("pwd").value;
			//2)获取当前确认密码框的内容
			var repwd = document.getElementById("repwd").value ;
			//3)获取id="repwdTip" 所在的span标签对象
			var span = document.getElementById("repwdTip") ;
			//4)判断
			if(pwd == repwd){
				//成立
				span.innerHTML = "两次密码一致".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML = "两次密码不一致".fontcolor("red") ;
				return false ;
			}
		}
		
		//校验邮箱
		function checkEmail(){
			//1)获取邮箱的内容
			var email = document.getElementById("email").value ;
			//2) 邮箱的正则:数字或者字母@数字或者字母.com/.cn/.com.cn
			var reg  = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/
			//3)获取id="emailTip"的span标签对象
			var span = document.getElementById("emailTip") ;
			//4)校验
			if(reg.test(email)){
				//成立
				span.innerHTML="邮箱格式正确".fontcolor("green") ;
				return true ;
			}else{
				//不成立
				span.innerHTML="不满足格式,重新输入".fontcolor("red") ;
				return false ;
			}
		}
		
		
		
		//将所有的表单项的都满足条件,才能提交
		
		function checkAll(){
			if(checkUserName() && checkPwd() && checkRepwd() && checkEmail()){
				return true ;
			}else{
				return false ;
			}
		}
	</script>
</html>