使用正则表达式写登录注册

最新推荐文章于 2023-09-20 20:13:01 发布

LAN_victory

最新推荐文章于 2023-09-20 20:13:01 发布

阅读量767

点赞数

分类专栏：前端html 文章标签：正则表达式 javascript 前端

本文链接：https://blog.csdn.net/m0_57142613/article/details/130631641

版权

前端html 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

该代码示例展示了如何使用JavaScript编写函数来验证HTML表单中的用户名、昵称、邮箱、密码、确认密码、手机号和出生日期等字段，通过正则表达式确保用户输入符合特定格式要求。当用户离开输入框时，会即时显示验证信息。

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

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
		
		<script type="text/javascript">
			//用户名
			function checkUsername(id,infoId){
				var name = /^[a-zA-Z][a-zA-Z0-9]{4,16}$/
				var username = document.getElementById(id).value;
				if(!name.test(username)){
					setInfo(infoId,'由英文字母和数字组成的4-16位字符，以字母开头')
					return false
				}
				return true
			}
			
			//昵称
			function checkIdname(id,infoId){
				var name = /^[\u4e00-\u9fa5]{2,6}$/
				var idname = document.getElementById(id).value;
				if(!name.test(idname)){
					setInfo(infoId,'由2-6个汉字组成')
					return false
				}
				return true
			}
			
			//邮箱
			function checkEmail(id,infoId){
				var name = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/
				var email = document.getElementById(id).value;
				if(!name.test(email)){
					setInfo(infoId,'邮箱账号@域名，如：good@tom.com. whj@sina.com.cn')
					return false
				}
				return true
			}
			
			//密码
			function checkPassword(id,infoId){
			    var name = /^[a-zA-Z0-9]{4,10}$/
			    var password = document.getElementById(id).value;
			    if (!name.test(password)) {
			        setInfo(infoId,'由英文字母和数字组成的4-10位字符')
			        return false
			    }
			    return true
			}
			
			//确认密码
			function checkPasswordAgain(pwd1,pwd2,infoId){
			    var pwd1 = document.getElementById(pwd1).value;
			    var pwd2 = document.getElementById(pwd2).value;
			    if (pwd1 != pwd2) {
			        return false
			    }
			    return true
			}
			
			//手机号
			function checkPhone(id,infoId){
			    var name = /^(13|15|18)\d{11}$/
			    var phone = document.getElementById(id).value;
			    if (!name.test(phone)) {
			        setInfo(infoId,'手机号为11位数字，且以13、15、18开头')
			        return false
			    }
			    return true
			}
			
			//出生日期
			function checkDate(id,infoId){
				var name = /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
				var date = document.getElementById(id).value;
				if(!name.test(date)){
					setInfo(infoId,'出生日期在1900-2009之间，如：1985-3-1或者1985-03-01')
				}
			}
				
			//提示信息
			function setInfo(id,info){
				document.getElementById(id).innerText = info;
			}
			//清空
			function clearInfo(id){
				document.getElementById(id).innerText = "";
			}
			
			//验证所有的输入是否正确
			function checkAll(){
				if(checkUsername('username','usernameInfo')&&checkIdname('idname','idnameInfo')&&checkEmail('email','emailInfo')&&checkPassword('password','passwordInfo')&&checPasswordAgain('password','passwordAgain','passwordAgainInfo')&&checkPhone('phone','phoneInfo')&&checkDate('date','dateInfo')){
					return true
				}
				return false
			}
			
		</script>
	</head>
	<body>
		<form method="GET" onsubmit="return checkAll()">
			用户名：<input type="text" id="username" onblur="checkUsername('username','usernameInfo')" onfocus="clearInfo('usernameInfo')"  />
			<span id="usernameInfo"></span>
			<br />
			昵称：<input type="text" id="idname" onblur="checkIdname('idname','idnameInfo')" onfocus="clearInfo('idnameInfo')" />
			<span id="idnameInfo"></span>
			<br />
			邮箱：<input type="email" id="email" onblur="checkEmail('email','emailInfo')" onfocus="clearInfo('emailInfo')" />
			<span id="emailInfo"></span>
			<br />
			密码：<input type="password" id="password" onblur="checkPassword('password','passwordInfo')" onfocus="clearInfo('passwordInfo')" />
			<span id="passwordInfo"></span>
			<br />
			确认密码：<input type="password" id="passwordAgain" onblur="checPasswordAgain('password','passwordAgain','passwordAgainInfo')" onfocus="clearInfo('passwordAgainInfo')" />
			<br />
			手机号码：<input type="text" id="phone" onblur="checkPhone('phone','phoneInfo')" onfocus="clearInfo('phoneInfo')" />
			<span id="phoneInfo"></span>
			<br />
			出生日期：<input type="text" id="date" onblur="checkDate('date','dateInfo')" onfocus="clearInfo('dateInfo')" />
			<span id="dateInfo"></span>
			<br />
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>