JS验证控件jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

实现步骤如下:

step1:在body标签中增加一个表单标签

		<form id="login_form" action="login.action" method="post">
			<table cellpadding="0" cellspacing="0" border="0" class="form_table">
				<tr>
					<td valign="middle" align="right">
						Email:
					</td>
					<td valign="middle" align="left">
						<input type="text" class="inputgri" name="email" />
						<span style="color: red">${msg}</span>
					</td>
				</tr>
				<tr>
					<td valign="middle" align="right">
						密码:
					</td>
					<td valign="middle" align="left">
						<input type="password" class="inputgri" name="password" />
					</td>
				</tr>
			</table>
			<p>
				<input type="submit" class="button" value="登录 »" />
				<a href="register.jsp">没有注册</a>
			</p>
		</form>

       

step2:导入Validate 插件js文件

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/messages_cn.js"></script>

step3:写js代码

		<script>
			$(document).ready(function(){
				$("#login_form").validate({
					rules: {
						email: {required: true, email: true },
						password:{required:true,minlength:6,maxlength:16},
					},
					messages: {
						email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
						password: {required:"需要输入密码",minlength:"密码长度在6-16个字符之间", maxlength:"密码长度在6-16个字符之间"},
					}
				});
			});
		</script>

参考链接:http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

点击下载源码