javascript之表单校验以及正则表达式

最新推荐文章于 2024-01-15 09:10:50 发布

橘子郡耶

最新推荐文章于 2024-01-15 09:10:50 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/weixin_42496678/article/details/82025397

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			function checkName(usernameObj){
				//等价于 document.getElementById("username");
				var username  = usernameObj.value;
				//alert(username);
				//编写一个正则表达式
				//var reg = new RegExp();
			
				
				var reg = /^\w{6，18}$/;
				//var reg  =/^\w+@\w{2,}.com$/;
				var msg  = document.getElementById("username_msg");
				if(reg.test(username)){
					msg.innerHTML = "✅";
				}else{
					msg.innerHTML = "❌";
				}
				
			}
			
			function checkPwd(){
				//等价于 document.getElementById("username");
				var password  = document.getElementById("password").value;
				
				//编写一个正则表达式
				//var reg = new RegExp();
		
				var msg  = document.getElementById("password_msg");
				if(reg.test(password)){
					msg.innerHTML = "✅";
				}else{
					msg.innerHTML = "❌";
				}
				
			}
			
			
		</script>
	</head>
	<body>
		<div align="center">
		<form action="" method="post" >
			<table border="1">
				<tr>
					<td>用户名</td>
					<!-- this  代表当前输入框-->
					<td><input type="text" id="username" name="username" onblur="checkName(this)" />
						<span id="username_msg">请输入6-18位的字符串</span>
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type="password" id="password" name="password" onblur="checkPwd()" />
						<span id="password_msg">请输入6-18位的字符串</span>
					</td>
				</tr>
				<tr>
					<td><input type="submit" value="登录" /> </td>
					<td><input type="reset" value="重置" /> </td>
				</tr>
				
			</table>		
		</form>
		</div>
		
	</body>
</html>

二、正则表达式

提供一个写正则表达式的工具：链接：https://pan.baidu.com/s/1H-pBKaPBCtelHZwixSwXhA 密码：kwt6

参考：https://www.cnblogs.com/meetup/p/5779616.html