jquery validate插件前端表单验证插件的使用

最新推荐文章于 2025-08-01 12:58:06 发布

sheng_xinjun

最新推荐文章于 2025-08-01 12:58:06 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端技术

本文链接：https://blog.youkuaiyun.com/sheng_xinjun/article/details/53114874

前端技术专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一款功能强大的表单验证插件，并通过实例演示了如何将其应用于JSP页面中，实现对用户名、密码、邮箱等字段的有效验证。

今天发现了一个特别好用的表单验证插件，功能相当强大。而且使用起来也特别简单。

首先，你需要引入相应的js文件。

<script src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script src="${pageContext.request.contextPath }/js/jquery.validate.min.js"></script>

我先把我jsp页面中的内容贴出来吧！

<form id="reg"
		action="${pageContext.request.contextPath }/RegistServlet">
		<table>
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" value="${user.username }"></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="text" id="password" name="password" value="${user.password }"></td>
			</tr>
			<tr>
				<td>确认密码</td>
				<td><input type="text" id="ckeckpassword" name="checkpassword" value="${user.password }"></td>
			</tr>
			<tr>
				<td>昵称</td>
				<td><input type="text" name="nickname" value="${user.nickname }"></td>
			</tr>
			<tr>
				<td>邮箱</td>
				<td><input type="text" name="email" value="${user.email }">
				</td>
			</tr>
			<tr>
				<td>验证码</td>
				<td><input type="text" name="valistr"><label value="">${msg }</label></td>
			</tr>
			<tr>
				<td><button type="submit">提交</button></td>
				<td><img src="${pageContext.request.contextPath }/ValiImg"
					style="cursor: pointer" onclick="change(this)"></td>
			</tr>
		</table>
	</form>

然后编写你自己页面的js代码。

$().ready(function(){
		$("#reg").validate({
			rules : {<span>	</span>//rules 用于对表单内容进行约束
				username : "required",  //用于控制用户名输入框必填
				password : "required",
				nickname : "required",
				checkpassword : {<span>	</span>//多个约束条件的时候，可以用大括号包起来
					required : true,
					equalTo : "#password"<span>	</span>//第二次输入验证码的时候，通过验证它与第一次输入的是否相同来验证
				},
				email : {
					required : true,
					email : true<span>	</span>//email :true 验证是否是邮箱格式
				}

			},
			messages : {<span>	</span>//messages 用于验证的时候在页面上输出提示信息，要注意的是messages与rules是一一对应的
				username : "请输入用户名",
				password : "请输入密码",
				nickname : "请输入昵称",
				checkpassword : {
						required : "请再次输入密码",
						equalTo : "两次密码不一致"
				},
				email : {
					required : "请输入邮箱",
					email : "邮箱格式不正确"
				}
			}

		});
	});

更多详细内容请参考菜鸟教程 http://www.runoob.com/jquery/jquery-plugin-validate.html