利用JavaScript检查用户注册信息是否正确

最新推荐文章于 2024-07-06 11:38:08 发布

原创最新推荐文章于 2024-07-06 11:38:08 发布 · 960 阅读

3 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript来检查用户注册时的用户名和口令是否符合规定：用户名需为3-10位的字母或数字，口令长度在6-20位之间，并且确认口令与输入口令必须一致。

要求：

用户名必须是3-10位英文字母或数字；
口令必须是6-20位；

两次输入口令必须一致。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>js实现注册表单验证</title>
</head>
<body>
<form id="test-register" action="#" target="#" onsubmit="return checkRegisterForm()">
    <p id="test-error" style="color:red"></p>
    <p>
        用户名: <input type="text" id="username" name="username">
    </p>
    <p>
        密码: <input type="password" id="password" name="password">
    </p>
    <p>
        确认密码: <input type="password" id="password2">
    </p>
    <p>
        <button type="submit">提交</button> <button type="reset">重置</button>
    </p>
</form>
<script>
	// 用户名必须是3-10位英文字母或数字；
	// 口令必须是6-20位；
	// 两次输入口令必须一致
	function checkRegisterForm(){
		var username = document.getElementById("username");
		var password = document.getElementById("password");
		var password2 = document.getElementById("password2");
		var testerror = document.getElementById("test-error");
		var name_re=/^[0-9a-zA-Z]{3,8}$/;
		var pwd_re=/^\S{6,20}$/;//没有规定是什么字符，\S匹配非空白字符
		if(name_re.test(username.value)&&pwd_re.test(password.value)&&password.value===password2.value){
			alert("提交成功！");
		}
		if(!name_re.test(username.value)){
			alert("用户名必须是3-10位英文字母或数字");
		}
		if(!pwd_re.test(password.value)){
			alert("密码必须是6-20位");
			console.log("password="+password.value+"password2="+password2.value);
		}
		if(password.value!==password2.value){
			alert("密码输入不一致");
		}
	}
</script>
</body>
</html>

知识点：

pwd_re=/^\S{6,20}$/;//没有规定是什么字符，\S匹配非空白字符