利用JQuery Validate 插件验证表单内容
以下是JQuery validate简介
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。
1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
今天我们在注册页面进行了加工，对文本框内内容进行了验证，判断它们是否符合标准，简易的界面如下所示：
我们设置了用户账号，用户名（感觉有点重复哈#-_-），密码，验证密码，用户手机号，邮箱。
里面默认的文字是设置文本框属性来进行的。格式如下：
下面显示不按要求输入内容会出现的问题：
此时文本框右侧会出现文字显示出错类型，并且表单不能跳转。
下面将实现此功能的代码写入下方：
以用户账号为例：
$("#a1").validate({
rules:{
//userId:"required",
userId:{
required:true,
minlength:6,
maxlength:16,
},在validate中写入了rules：required（表明文本框内容必须非空）、minlength和maxlength（分别限制最小和最大长度）。
仅仅写rules是不够的，我们还要写上对应的出错提示：message，代码见下
还是以用户账号为例
messages:{
userId:{
required:"请填入信息",
minlength:"请至少输入6位符号",
maxlength:"请至多输入16位符号",
},<注意>，利用JQuery validate插件编写方法时，有很多细节格式需要注意：
1.rules和message后要打冒号，并且大括号外要打逗号。
2.里面的每个组件的验证规定格式为： * id名 ： { }，*
3.每条规则写完后要打逗号。
以上就是今天所学内容：利用JQuery validate插件实现表单验证。
下面附加完整代码：
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<script type="text/javascript" src="js/messages_zh.js">script>
<script type="text/javascript" src="js/jquery.js">script>
<script type="text/javascript" src="js/jquery.validate.min.js">script>
<script type="text/javascript">
$(function(){
$("#a1").validate({
rules:{
//userId:"required",
userId:{
required:true,
minlength:6,
maxlength:16,
},
name:{
required:true,
minlength:3,
maxlength:8,
},
password1:{
required:true,
minlength:6,
maxlength:16,
},
password2:{
required:true,
minlength:6,
maxlength:16,
equalTo:"#password1"
},
phoneNum:{
required:true,
minlength:11,
maxlength:11,
digits:true
},
Email:{
required:true,
email:true
},
},
messages:{
userId:{
required:"请填入信息",
minlength:"请至少输入6位符号",
maxlength:"请至多输入16位符号",
},
name:{
required:"请填入信息",
minlength:"请至少输入3位符号",
maxlength:"请至多输入8位符号",
},
password1:{
required:"请填入密码",
minlength:"请至少输入6位符号",
maxlength:"请至多输入16位符号",
},
password2:{
required:"请填入密码",
minlength:"请至少输入6位符号",
maxlength:"请至多输入16位符号",
equalTo:"前后密码不一致"
},
phoneNum:{
required:"请填入信息",
minlength:"请输入11位数字",
maxlength:"请至多输入11位数字",
digits:"请输入阿拉伯数字"
},
Email:{
required:"请输入email",
email:"请输入正确格式的email地址"
},
},
});
});
script>
<body>
<form id="a1" action=""method="post">
<input id="userId" name="userId" placeholder="请输入用户账号，长度为6-16"/><br />
<input id="name" name="name" placeholder="请输入用户名，长度为3-8"/><br />
<input id="password1" name="password1" type="password" placeholder="请输入密码，长度为6-16" /><br />
<input id="password2" name="password2" type="password" placeholder="请再次核对密码"/><br />
<input id="phoneNum" name="phoneNum" placeholder="请输入手机号，长度为11位"/><br />
<input id="Email" name="Email" placeholder="请输入邮箱" /><br />
<input type="submit" value="注册" />
form>
body>
html>