本文实例讲述了jQuery validate插件功能与用法。分享给大家供大家参考，具体如下：

前言：对于表单内容格式的验证，原生JS的写法，较为繁琐，笔者曾在写一个注册界面的时候，验证邮箱格式，用户名格式，密码格式，多处使用了正则，并且错误提示信息也要用display:none/显示隐藏，在用过jQuery validate插件后，则大大加快了开发速度！

1.jQuery validate插件提供了强大的验证功能，jQuery validate插件的官网是http://jqueryvalidation.org/，官方网站上有详细的文档介绍了jQuery插件的使用方法。对于插件的使用

(1)首先下载jquery.validate.js插件

然后在HTML文件中插入

<script type="text/JavaScript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/js1.js"></script>

因为jQuery插件是基于jQuery库基础之上的，因此在导入jQuery validate.js文件之前一定要先导入jQuery.js文件

(2) jQuery validate插件提供了$(form).validate(options)方法，本插件自带必填的数字，文字等验证规则

其中form表示表单元素名称，options表示调用validate方法时的配置对象，所有配置信息和异常信息显示的规则都包含在对象options中。

2.对于使用jQuery validate的方法有很多种，这里详细介绍通过表单元素名称来验证表单规则的方法。

即一种与HTML元素无直接联系，而是通过name属性来关联字段和验证规则的验证写法，这种方法可以实现行为与结构的分离。

<form id="form-sp">
 <fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名</label>
<input type="text" name="username" />
</p>
  <p class="tip"></p>
<p>
<label for="password">密&nbsp;码</label>
  <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
<label for="confirm-password">再输入</label>
<input type="password" name="confirm-password"/>
</p>
<p class="tip"></p>
  <label for="verify"></label>
  <input type="button" value="确定" name="verify" id="btn-ver"/>
  </fieldset>
</form>

这对上诉的HTML文件，我们可以写成如下验证规则：

$("#form-sp").validate({
rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"请输入你的用户名",
minlength:"至少输入三位的用户名"
}
},
errorPlacement:function(error,element){
  error.appendTo(element.parent().next());
}
})

运行这段代码后，显示为

我们发现在自定义规则之后，表单自带了验证方法，下面我们来看validate对象中，具体属性的作用

（1）首先在rules属性中，我们根据表单的name，来确定各个表单元素的规则：

比如required:true

说明用户名这个表单元素，不能为空，

minlength:2，表示用户名至少为2位字符

maxlength:10，表示用户名至多为10位的字符

（2）其次在messages属性中，定义了当表单中的信息与规则不符合情况下的，错误提示信息，

如果不修改，默认为英文提示。在这里我们修改了username表单元素的required：属性的错误信息

因为在报错的时候会提示，“至少输入三位用户名”

3.了解jQuery validate插件的两个基本属性rules和messages，

下面jQuery validate默认校验表单：

我们来分析来个有意思的校验元素

（1）equalTo

对于equalTo元素，使用方法为equalTo:"#filed"

在具体的使用时，只有当前的表单元素中的值与name为filed的表单元素的值相等时，返回true 不会报错，否则会报错，并显示错误提示信息，常见的应用是在注册界面验证两次输入密码是否一致，比如：

<p>
<label for="password">密&nbsp;码</label>
 <input type="password" name="password"/>
</p>
<p class="tip"></p>
<p>
 <label for="confirm-password">再输入</label>
 <input type="password" name="confirm-password"/>
</p>

对于这个表单，有如下验证规则：

rules:{
username:{
required:true,
minlength:3
},
password:{
required:true,
minlength:6
},
"confirm-password":{
required:true,
equalTo:"#password"
}
},

只有当name=confirm-password的表单元素，与name=password的表单元素值相等时，才不会报错，否则会显示错误提示信息。

（2）email校验元素，用于验证邮箱的格式

如果我们在上例中的表单验证信息中加入email:true那么会自动验证所输出的是否匹配邮箱格式，若不匹配则返回false并显示错误提示信息；

4.validate的其他方法

（1）用其他方法代替默认的submit方法

submitHandler:function(form){
 form.submit();
}
submitHandler:function(form){
 form.ajaxsubmit();
}

并且可以改变validate()对象的默认submit方法：

$.validate.setDefaults({
 submitHander:function(form){
 form.submit();
 }
})

(2)debug:只验证不提交表单

如果debug:true，则表单只验证不会提交，

同样也可以改变validate()对象的默认submit方法

$.validate.setDefaults({
 debug:true;
})

(3)更改错误信息的显示位置

errorPlacement:function(error,element){
 //第一个参数为错误提示信息，第二个参数为HTML中的元素
 error.appendTo(element.parent())
 //这里也可以直接写成类名的形式或者id名的形式
 //error.appendTo(".class")或者error.appendTo("#id");
}

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

# jQuery  # validate  # 插件  # jQuery validate插件实现ajax验证重复的2种方法  # jQuery Validate插件实现表单验证  # jQuery验证插件validate使用方法详解  # jQuery validata插件实现方法  # 表单  # 提示信息  # 报错  # 错误信息  # 自定义  # 则会  # 错误提示  # 是在  # 在这里  # 放在  # 相关内容  # 第一个  # 最多  # 遍历  # 两次  # 上有  # 感兴趣  # 这段  # 我们可以  # 英文 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何快速选择适合个人网站的云服务器配置？  图册素材网站设计制作软件,图册的导出方式有几种？  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  儿童网站界面设计图片,中国少年儿童教育网站-怎么去注册？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  中山网站制作网页,中山新生登记系统登记流程？  再谈Python中的字符串与字符编码（推荐）  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  Laravel Artisan命令怎么自定义_创建自己的Laravel命令行工具完全指南  Laravel如何与Inertia.js和Vue/React构建现代单页应用  bing浏览器学术搜索入口_bing学术文献检索地址  Laravel如何理解并使用服务容器（Service Container）_Laravel依赖注入与容器绑定说明  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  如何用PHP快速搭建高效网站？分步指南  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  如何获取上海专业网站定制建站电话？  如何自定义建站之星模板颜色并下载新样式？  如何快速上传建站程序避免常见错误？  如何快速查询网址的建站时间与历史轨迹？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  iOS中将个别页面强制横屏其他页面竖屏  详解jQuery停止动画——stop()方法的使用  长沙企业网站制作哪家好,长沙水业集团官方网站？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  Laravel怎么上传文件_Laravel图片上传及存储配置  JavaScript数据类型有哪些_如何准确判断一个变量的类型  标题：Vue + Vuex + JWT 身份认证的正确实践与常见误区解析  如何选择PHP开源工具快速搭建网站？  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  jquery插件bootstrapValidator表单验证详解  Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】  浅析上传头像示例及其注意事项  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  ,网页ppt怎么弄成自己的ppt？  网站制作壁纸教程视频,电脑壁纸网站？  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  如何在IIS中新建站点并解决端口绑定冲突？  如何快速启动建站代理加盟业务？  北京网站制作的公司有哪些,北京白云观官方网站？  Laravel如何处理异常和错误？（Handler示例）  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  微信h5制作网站有哪些,免费微信H5页面制作工具？  深入理解Android中的xmlns:tools属性  微信小程序 input输入框控件详解及实例（多种示例）