用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。

最新推荐文章于 2023-01-16 18:47:21 发布

漫步笔记

最新推荐文章于 2023-01-16 18:47:21 发布

阅读量9.3k

点赞数 6

分类专栏：学习文章标签： javascript html

本文链接：https://blog.csdn.net/m0_46177715/article/details/104229239

版权

学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

题目：写一个用于登录的表单，包含用户名、密码和手机号码。提交数据的时候，要求验证：
1. 用户名必须输入汉字；
2. 密码总共6位，前2位为字母，后4位为数字；
3. 手机号码符合中国大陆手机号码格式
如果输入错误，则在输入框后面显示对应的文本提示信息

代码如下：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		
//		1.当失去焦点时,用户名校验函数
		function checkUserName(){
//			1.1 获取到usernameID对应的input元素节点和username对应的校验span元素节点
			var usernameNode = document.getElementById("usernameID");
			var usernameCheckNode = document.getElementById("usernameCheckID");
//			1.2 定义校验正则
			var usernameReg = /^[\u4e00-\u9fa5]+$/ig;
//			1.3 获取到username元素节点的value属性值
			var usernameValue = usernameNode.value;
//			1.4 判断value属性值是否匹配正则并进行相关处理
			if (usernameReg.test(usernameValue)) {
				usernameCheckNode.innerText = "用户名输入成功！";  //当用户名输入成功时候的校验结果
				usernameCheckNode.style.color = "green";
				return true;
			} else{
				usernameCheckNode.innerText = "用户名输入失败！请输入中文用户名";  //当用户名输入失败时候的校验结果
				usernameCheckNode.style.color = "red";
				return false;
			}
		}
		
//		2.当失去焦点时,密码校验函数
		function checkPassword(){
//			2.1 获取到passwordID对应的input元素节点和password对应的校验span元素节点
			var passwordNode = document.getElementById("passwordID");
			var passwordCheckNode = document.getElementById("passwordCheckID");
//			2.2 定义校验正则
			var passwordReg = new RegExp("^[a-zA-Z]{2}[0-9]{4}$","ig");
//			2.3 获取到password元素节点的value属性值
			var passwordValue = passwordNode.value;
//			2.4 判断value属性值是否匹配正则并进行相关处理
			if (passwordReg.test(passwordValue)) {
				passwordCheckNode.innerText = "密码输入成功！";  //当密码输入成功时候的校验结果
				passwordCheckNode.style.color = "green";
				return true;
			} else{
				passwordCheckNode.innerText = "密码输入失败！密码为6位，前两位为英文字母，后四位为数字";  //当密码输入失败时候的校验结果
				passwordCheckNode.style.color = "red";
				return false;
			}

		}
		
//		3.当失去焦点时,手机号校验函数
		function checkPhoneNumber(){
//			3.1 获取到phoneID对应的input元素节点和phoneNumber对应的校验span元素节点
			var phoneNode = document.getElementById("phoneID");
			var phoneCheckNode = document.getElementById("phoneCheckId");
//			3.2 定义校验正则
			var phoneReg = /^1[0-9]{10}$/ig;
//			3.3 获取到phoneNumber元素节点的value属性值
			var phoneValue = phoneNode.value;
//			3.4 判断value属性值是否匹配正则并进行相关处理
			if (phoneReg.test(phoneValue)) {
				phoneCheckNode.innerText = "手机号输入成功！";  //当手机号输入成功时候的校验结果
				phoneCheckNode.style.color = "green";
				return true;
			} else{
				phoneCheckNode.innerText = "手机号输入失败！请输入中国大陆手机号码";  //当手机号输入失败时候的校验结果
				phoneCheckNode.style.color = "red";
				return false;
			}
		}
		
//		4.定义整体提交数据校验函数
		function checkInput(){
			if (checkUserName() && checkPassword() && checkPhoneNumber()) {
				alert("恭喜注册成功！");
				return true;
			} else{
				return false;
			}
		}
		
	</script>
	<body>
		<form id="loginID" name="login" action="submit.html" method="get" onsubmit="return checkInput()">
			用户名：<input type="text" id="usernameID" name="username" placeholder="请输入中文用户名" onblur="checkUserName()"/>
			<span id="usernameCheckID"></span> <br />
			密码：<input type="password" id="passwordID" name="password" placeholder="密码为6位，前两位为英文字母，后四位为数字" onblur="checkPassword()"/>
			<span id="passwordCheckID"></span> <br />
			手机号码：<input type="text" id="phoneID" name="phoneNumber" placeholder="请输入中国大陆手机号" onblur="checkPhoneNumber()"/>
			<span id="phoneCheckId"></span>
			<br />
			<input type="submit" name="submit"/>
			<input type="reset"/>
		</form>
	</body>
</html>

第一次在博客写东西，可能有很多写得不对的地方，欢迎点评~

漫步笔记

关注

6
点赞
踩
44

收藏

觉得还不错? 一键收藏
2
评论
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。

我的第一个博客题目：写一个用于登录的表单，包含用户名、密码和手机号码。提交数据的时候，要求验证：1. 用户名必须输入汉字；2. 密码总共6位，前2位为字母，后4位为数字；3. 手机号码符合中国大陆手机号码格式如果输入错误，则在输入框后面显示对应的文本提示信息代码： // 2.当失去焦点时,密码校验函数function checkPassword(){// ...
复制链接

扫一扫