JavaScript的表单校验

最新推荐文章于 2024-06-22 23:03:24 发布

DIO______________

最新推荐文章于 2024-06-22 23:03:24 发布

阅读量241

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端正则表达式开发语言

本文链接：https://blog.csdn.net/yswh11212/article/details/124696076

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用正则表达式验证用户名密码等，是否符合使用规范

正则规则:

               用户名:4-14位的数字或者字母(不区分大小写)组成
               密码:6-10位的数字或者英文大小字母组成
               确认密码和密码一致
               邮箱:满足邮箱的格式
                   数字或者字母@数字或者字母.com/.cm/.com.cn
                       111111111@qq.com
                               @163.com
                               @Istone.com.cn
                               本身字符就是. 需要\. 转义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#center{
				position: absolute;
				left: 500px;
				top: 150px;
				text-align: center;
				width: 400px;
				height: 140px;
			}
		</style>
		<script>
			//校验用户名
			function getName(){
				//1)获取 用户名的内容  (id="name"的input标签对象同时获取内容)
				var nameObject = document.getElementById("name");
				aname = nameObject.value;
				//2)定义用户名的正则规则:用户名:6-16位的数字或者字母(不区分大小写)组成
				var reg = /^[A-Za-z0-9]{6,16}$/
				//3)获取 id="testName"的span标签对象
				var span = document.getElementById("testName");
				//4)正则表达式校验用户名的内容 arname
				if(reg.test(aname)){
					span.innerHTML = "该用户名可用".fontcolor("green");
					return true;
				}else{
					span.innerHTML = "该用户名不可用".fontcolor("red");
					return false;
				}
			}
			//校验密码
			function getPassword(){
				//1)获取密码输入框的内容 dom操作
				var pwObject = document.getElementById("password");
				apw = pwObject.value;
				//2)密码正则:6-16位的数字或者英文大小字母组成
				var reg = /^[A-Za-z0-9]{6,16}$/
				//3)获取id="testPassword"所在的span标签对象
				var span = document.getElementById("testPassword");
				//4)正则校验
				if(reg.test(apw)){
					span.innerHTML = "该密码可用".fontcolor("green");
					return true;
				}else{
					span.innerHTML = "该密码不可用".fontcolor("red");
					return false;
				}
			}
			//校验确认密码
			function rePassword(){
				//1)获取密码框的内容
				var pw = document.getElementById("password").value;
				//2)获取当前确认密码框的内容
				var repw = document.getElementById("repassword").value;
				//3)获取id="testRepassword" 所在的span标签对象
				var span = document.getElementById("testRepassword")
				//4)判断
				if(pw==repw){
					span.innerHTML = "密码正确".fontcolor("green");
					return true;
				}else{
					span.innerHTML = "两次密码不一致".fontcolor("red");
					return false;
				}
			}
			//校验邮箱
			function getEmail(){
				
				//1)获取邮箱的内容
				
				var elObject = document.getElementById("email");
				
				ael = elObject.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("testEmail");
				
				//4)校验
				
				if(reg.test(ael)){
					
					span.innerHTML = "该邮箱可用".fontcolor("green");
					
					return true;
					
				}else{
					
					//不成立
					
					span.innerHTML = "请输入正确的邮箱".fontcolor("red");
					
					return false;
				}
			}
			//将所有的表单项的都满足条件,才能提交
			
			function All(){
				
				if(getName()&&getPassword()&&rePassword()&&getEmail()){
					
					return true;
				}else{
					return false;
				}
			}
		</script>
	</head>
	<body>
		<!--
			form表单一个事件:onsubmit:表单是否你能够提交成功!
			携带的值如果true,能够提交成功
			false,提交失败!
			
			
		 -->
		<form action="index.html" onsubmit="return All()">
			<div id="center">
				<br />
				用户名&emsp;<input type="text" id="name" placeholder="请输入用户名" onblur="getName()">
				<span id="testName"></span>
				<br />
				密&emsp;码&emsp;<input type="password" id="password" placeholder="请输入密码" onblur="getPassword()">
				<span id="testPassword"></span>
				<br />
				重复密码<input type="password" id="repassword" placeholder="请再次输入密码" onblur="rePassword()">
				<span id="testRepassword"></span>
				<br />
				邮&emsp;箱&emsp;<input type="text" id="email" placeholder="请输入登陆邮箱" onblur="getEmail()">
				<span id="testEmail"></span>
				<br />
				<input type="submit" value="注册" onclick="">
				<br />
			</div>
		</form>
	</body>
</html>