位置: 编程技术 - 正文

jQuery validate插件功能与用法详解(jquery validation)

编辑:rootadmin

推荐整理分享jQuery validate插件功能与用法详解(jquery validation),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery validate remote,jquery validate remote,jquery validation plugin,jquery validator,jquery-validation,jquery-validation,jquery-validate,jquery validation plugin,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

1.jQuery validate插件提供了强大的验证功能,jQuery validate插件的官网是 validate.js文件之前一定要先导入jQuery.js文件

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

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

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

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

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

运行这段代码后,显示为

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

(1)首先在rules属性中,我们根据表单的name,来确定各个表单元素的规则:

比如required:true

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

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

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

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

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

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

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

jQuery validate插件功能与用法详解(jquery validation)

下面jQuery validate默认校验表单:

1 required:true 必须输入的字段。 2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。 3 email:true 必须输入正确格式的电子邮件。 4 url:true 必须输入正确格式的网址。 5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 6 dateISO:true 必须输入正确格式的日期(ISO),例如:--,//。只验证格式,不验证有效性。 7 number:true 必须输入合法的数字(负数,小数)。 8 digits:true 必须输入整数。 9 creditcard: 必须输入合法的信用卡号。 equalTo:"#field" 输入值必须和 #field 相同。 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。 minlength: 输入长度最小是 的字符串(汉字算一个字符)。 rangelength:[5,] 输入长度必须介于 5 和 之间的字符串(汉字算一个字符)。 range:[5,] 输入值必须介于 5 和 之间。 max:5 输入值不能大于 5。 min: 输入值不能小于 。 这里对于各个校验元素就不一一分析

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

(1)equalTo

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

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

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

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

(2)email校验元素,用于验证邮箱的格式

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

4.validate的其他方法

(1)用其他方法代替默认的submit方法

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

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

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

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

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

errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error" errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label" errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。 errorContainer: "#messageBox1, #messageBox2" errorLabelContainer Selector 把错误信息统一放在一个容器里面。 wrapper String 用什么标签再把上边的 errorELement 包起来。

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

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

jQuery Validate让普通按钮触发表单验证的方法 一般的表单校验都是直接注册在页面上的匿名函数,导致只能通过固定的提交方式触发表单校验,如果想自定义一个按钮触发表单校验如何实现呢?目

详解jQuery简单的表单应用 大致介绍接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解单行文本框只介绍一个简单的样式:获取和失去焦点改变样式基本结构

jquery UI Datepicker时间控件冲突问题解决 公司里的项目由于发展较快,很多东西都没有好好梳理一下,以至于有很多的潜在的问题。最近就遇到了一个比较坑的问题。datepicker有两个插件库中的d

标签: jquery validation

本文链接地址:https://www.jiuchutong.com/biancheng/373923.html 转载请保留说明!

上一篇:jquery插件bootstrapValidator表单验证详解(jQuery插件能输出到控制台)

下一篇:jQuery Validate让普通按钮触发表单验证的方法(jquery prevall)

  • 个人卖给公司车需要什么手续
  • 应纳税所得额是什么意思
  • 奖金个人所得税税率
  • 分支机构注销后往来账如何处理
  • 包装运杂费结转生产成本会计分录
  • 个税申报错了并且已经缴款怎么修改
  • 经营所得税投资者减除费用
  • 没有纸质机票电子行程单电子版可以报销吗
  • 私营小微企业可以贷款吗
  • 红字冲回是负数吗
  • 购买的职业险计入哪个科目
  • 出口预收货款发生的时间和报表上的时间不一样怎么办
  • 林木育种的意义和作用
  • 公司进项销项税差异较大
  • 各省市地税发票怎么开
  • 申报增值税附表二代不出数据
  • 外籍人员的个人所得税怎么算
  • 固定资产折旧税务处理
  • 出口申报时限
  • 消费税漏缴怎么补缴
  • 社会团体的费用包括哪些
  • 收到汽车报废补贴怎么做账?
  • 商品进价销售要上税吗
  • vmware15虚拟机
  • 主机 bios
  • 暂估成本能挂账多久
  • fdisk分区工具怎么用
  • 汽车维修行业会计分录
  • ghoststartservice.exe是什么进程 有什么作用 ghoststartservice进程查询
  • 工业企业在进行材料采购
  • PHP:cal_days_in_month()的用法_日历函数
  • php遍历结果集
  • 一般纳税人商业税负多少
  • 销售货物代垫的运费会计分录
  • 利润表利息费用怎么填
  • 前端开发常见的兼容性问题
  • 专利权研发成功的会计分录
  • 进项税额转出需要补税
  • 开了红字发票申请还要做进项税转出吗
  • 建筑施工企业增值税税率调整时间
  • 出口退税会计分局
  • mongodb导入数据三种方式
  • 实施资本公积金的目的
  • 企业的资产评估报告在哪里获取
  • 保税仓发货的商品退货要承担税吗
  • win2008r2服务器文件无法进入软件
  • 简易计税是否要计增值税
  • 分公司是否具有独立承担民事责任的能力
  • 暂估回冲方式
  • 长期待摊费用的摊销期限应该是
  • 单位租赁个人房子怎么缴纳房产税
  • 农业生产成本核算方法
  • 旅客运送的一般规定
  • 增值税直接减免额怎么做账
  • 法定节假日报税顺延几天
  • 营业执照注册资金变更
  • Windows 2003 SP2 简体中文版下载地址
  • 注册表及其作用
  • 修改注册表显示隐藏文件
  • hptasks.exe是病毒吗 是什么进程 hptasks进程说明
  • ubuntu 命令行修改用户密码
  • WIN7系统怎么安装 注音输入法
  • ttf文件安装到电脑
  • windows7开机磁盘检查怎么取消
  • 新版电脑装win7
  • cocos2d官网
  • three.js怎么用
  • ExtJS4给Combobox设置列表中的默认值示例
  • [置顶]星陨计划
  • Linux 下mysql通过存储过程实现批量生成记录
  • jquery中的$是什么
  • jQuery Ajax 加载数据时异步显示加载动画
  • FileUtils文件工具类
  • python 在线运行环境
  • 深入理解计算机系统 电子书
  • 新疆税务局电子
  • 中国税务干部
  • 税务稽查为什么不问证人
  • 企业交社保可以退税吗
  • 报税软件怎么用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设