用户注册及正则校验

最新推荐文章于 2022-05-13 21:44:47 发布

mwsblue

最新推荐文章于 2022-05-13 21:44:47 发布

阅读量227

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/mwsblue/article/details/115646580

版权

前端基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<form action="">
		用户名：<input type="text">*6~8位<br>
		手机号：<input type="number"><br>
		邮  箱：<input type="email"><br>
		密  码：<input type="text">6~16位，必须包含数字、字母、特殊符<br>
		<button type="button">注册</button>
	</form>
	<script>
	    document.querySelector("button").onclick=function(){
			var userName = document.querySelectorAll("input")[0].value;
			var phoneNum = document.querySelectorAll("input")[1].value;
			var email = document.querySelectorAll("input")[2].value;
			var pwd = document.querySelectorAll("input")[3].value;

			var nameReg = /^.{6,8}$/img;
			var phoneReg = /^1[35789]\d{9}$/img
			var emailReg = /\w+@\w+\.(com|cn)/img
			var pwdReg = /^(?=.*[A-z]+)(?=.*\d+)(?=.*\w+).{6,16}$/img

			if(!nameReg.test(userName)){
				alert("用户名输入错误")
				return;
			}

			if(!phoneReg.test(phoneNum)){
				alert("手机号码输入错误")
				return;
			}

			if(!emailReg.test(email)){
				alert("邮箱输入错误")
				return;
			}
			if(!pwdReg.test(pwd)){
				alert("密码输入错误")
				return;
			}

			alert("注册成功")
		}
	</script>
</body>
</html>