注册验证(简单,jquery)

最新推荐文章于 2025-12-03 10:19:14 发布

转载最新推荐文章于 2025-12-03 10:19:14 发布 · 370 阅读

文章标签：

#注册验证 jquery

jQuery 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的基本表单验证案例。该案例重点在于如何通过JavaScript进行实时输入验证，确保用户输入的数据符合长度要求。具体包括用户名（3到9位字符）和密码（6到8位字符）的有效性检查，并采用图片图标直观反馈验证结果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		用户名：<input type="text" name="uname">
					<span></span><br>
		密码：<input type="password" name="upwd">
					<span></span><br>
		<input type="submit" value="提交注册信息">
	</form>

	<script src="js/jquery.min.js"></script>
	<script>
		var $txtName=$("form>input[name=uname]"),
		    $txtPwd=$("form>input[name=upwd]"),
		    msgs={
		    	nameErr:"用户名必须介于3~9位之间!",
		    	pwdErr:"密码必须介于6~8位之间!"
		    };
		$txtName.blur(e=>{
			vali($(e.target),3,9,msgs.nameErr);
			//这里还可以加其他验证
		});
		$txtPwd.blur(e=>{
			vali($(e.target),6,8,msgs.pwdErr);
		});
		$("form").submit(e=>{
			if(!vali($txtName,3,9,msgs.nameErr)){
				e.preventDefault();
			}else if(!vali($txtPwd,6,8,msgs.pwdErr)){
				e.preventDefault();
			}
		})
		function vali($txt,minLen,maxLen,msg){
			var len=$txt.val().trim().length;
			var $span=$txt.next();
			if(len>=minLen&&len<=maxLen){
				$span.html("<img src='img/ok.png'>");
				return true;
			}else{
				$span.html("<img src='img/err.png'>"+msg);
				return false;
			}
		}
	</script>
</body>
</html>