微信公众号小程序_jQuery validate插件功用与用法详解

  • 栏目:行业动态 时间:2021-01-12 16:21 分享新闻到:
<返回列表

jQuery validate插件功能与用法详解       这篇文章主要介绍了jQuery validate插件功能与用法,结合实例形式详细分析了jQuery validate插件的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下

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

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

1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是,官方网站上有详细的文档介绍了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 
 label for="username" 用户名 /label 
 input type="text" name="username" / 
 p /p 
 label for="password" 密 nbsp;码 /label 
 input type="password" name="password"/ 
 p /p 
 label for="confirm-password" 再输入 /label 
 input type="password" name="confirm-password"/ 
 p /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默认校验表单:


dateISO:true 必须输入正确格式的日期(ISO),例如:,1998/01/22。只验证格式,不验证有效性。

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

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

 label for="password" 密 nbsp;码 /label 
 input type="password" name="password"/ 
 p /p 
 label for="confirm-password" 再输入 /label 
 input type="password" name="confirm-password"/ 

对于这个表单,有如下验证规则:

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");

Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
errorContainer: "#messageBox1, #messageBox2"  
分享新闻到:

更多阅读

微信公众号小程序_jQuery validate插件功用与

行业动态 2021-01-12
jQuery validate软件作用与使用方法详细说明 本文关键详细介绍了jQuery validate软件作用与使...
查看全文

广州凡科互联网科技股份有限公司招聘波

行业动态 2021-01-12
招聘人数:24职位信息1, 半年以上电商平台操作经验。2、懂波兰语,需懂部分汉语或者英语。...
查看全文

广州凡科互联网科技股份有限公司招聘商

行业动态 2021-01-12
招聘人数:12职位信息1)负责渠道开发,挖掘有效客户达成合作共识。2)维护合作渠道,解决...
查看全文
返回全部新闻


区域站点: 南丰县免费抠图换背景软件   南宫市网页效果图制作   囊谦县在线抠图软件   南和县手机抠图   南华县免费抠图换背景软件   南江县网页效果图制作   南京市在线抠图软件   南靖县手机抠图   南康市免费抠图换背景软件   南乐县网页效果图制作   南陵县在线抠图软件   南宁市手机抠图   南平市免费抠图换背景软件   南皮县网页效果图制作   南市区在线抠图软件   南通市手机抠图   南投县免费抠图换背景软件   南雄市网页效果图制作   南溪县在线抠图软件   南阳市手机抠图   南漳县免费抠图换背景软件   南召县网页效果图制作   南郑县在线抠图软件   那坡县手机抠图   那曲县免费抠图换背景软件   纳雍县网页效果图制作   讷河市在线抠图软件   内黄县手机抠图   内江市免费抠图换背景软件   内丘县网页效果图制作   内乡县在线抠图软件   嫩江市手机抠图   聂荣县免费抠图换背景软件   尼玛县网页效果图制作   尼木县在线抠图软件   宁安市手机抠图   宁波市免费抠图换背景软件   宁城县网页效果图制作   宁德市在线抠图软件   宁都县手机抠图   宁国市免费抠图换背景软件   宁海县网页效果图制作   宁化县在线抠图软件   宁晋县手机抠图   宁陵县免费抠图换背景软件   宁明县网页效果图制作   宁南县在线抠图软件   宁强县手机抠图   宁陕县免费抠图换背景软件   宁武县网页效果图制作   宁乡市在线抠图软件   宁阳县手机抠图   宁远县免费抠图换背景软件   农安县网页效果图制作   磐安县在线抠图软件   盘锦市手机抠图   盘山县免费抠图换背景软件   磐石市网页效果图制作   盘州市在线抠图软件   蓬安县手机抠图   澎湖县免费抠图换背景软件   蓬莱市网页效果图制作   彭山县在线抠图软件   蓬溪县手机抠图   彭阳县免费抠图换背景软件   彭泽县网页效果图制作   彭州市在线抠图软件   偏关县手机抠图   平安县免费抠图换背景软件   平昌县网页效果图制作   平定县在线抠图软件   屏东县手机抠图   平度市免费抠图换背景软件   平果县网页效果图制作   平和县在线抠图软件   平湖市手机抠图   平江县免费抠图换背景软件   平乐县网页效果图制作   平凉市在线抠图软件   平利县手机抠图   平罗县免费抠图换背景软件   平陆县网页效果图制作   屏南县在线抠图软件   平泉市手机抠图   屏山县免费抠图换背景软件   平顺县网页效果图制作   平塘县在线抠图软件   平潭县手机抠图   平武县免费抠图换背景软件   萍乡市网页效果图制作   平乡县在线抠图软件   平阳县手机抠图   平遥县免费抠图换背景软件   平阴县网页效果图制作   平邑县在线抠图软件   平远县手机抠图   平舆县免费抠图换背景软件   皮山县网页效果图制作   普安县在线抠图软件   浦北县手机抠图   浦城县免费抠图换背景软件   普洱市网页效果图制作   普格县在线抠图软件   浦江县手机抠图   普兰县免费抠图换背景软件   普宁市网页效果图制作   莆田市在线抠图软件   迁安市手机抠图   乾安县免费抠图换背景软件   潜江市网页效果图制作   潜山市在线抠图软件  

友情链接: 淘宝做图片用什么 类似图怪兽的软件 招牌设计图片 抠图在线 手机版

Copyright © 2002-2020 在线抠图软件_手机抠图_免费抠图换背景软件_网页效果图制作_通道怎么抠图 版权所有 (网站地图) 备案号:粤ICP备10235580号