jQuery验证表单格式的使用方法


Posted in Javascript onJanuary 10, 2017

   工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合。以下是关于此jQuery验证的一些标记以及使用方法:

整个js代码都放入jquery_validate_1.1.0.js中,通过一个匿名函数,jQuery的扩展方法,扩展方法为:initValidate函数,方法中带一个options配置参数,目前配置参数只有一个属性,{handlerUrl:""},提供是否需要后台请求验证的url地址。只需要对取验证的DOM绑定$("ID").initValidate(options)。通过给input控件添加自定义属性,自定义属性规则如下:

<div id="panda">
  <input type="text" validate="true" ctr-type="mobile" />
 </div>

以上一个简单的demo是验证输入格式是否为手机号,如果输入的信息不符合规则,错误信息会提示在输入框下一行,如下图:

jQuery验证表单格式的使用方法

validate="true" // 执行验证,这个不设置为true其他属性都不验证;
isrequired="true" // 必填验证
checkunique="true" // 后台Ajax唯一性验证,如果不唯一则验证失败;
ctr-type="email" // 格式是email, pwd:密码,char:姓名,number:数字,float:带小数的数字,mobile:手机,idcard:身份证;
repeatpwd="true" // 密码重复性检验,这个标签必须同时出现在两个需要检验的密码和重复输入密码控件。
初始化示例:
$('#panda').initValidate();
提交按钮提交之前对所有输入进行验证:
$('.okbtn').click(function () { return $('#panda').validateAllControls() });
Email验证使用示例:
<input type="text" ctr-type="email" checkunique="true" isrequired="true" validate="true" name="myEmail" id="myEmail"/>
<label class="error"></label>
密码验证使用示例:
<input type="password" ctr-type="pwd" isrequired="true" validate="true" repeatpwd="true" name="newPassword"/>
<label class="error"></label>

以上的验证,前提条件是validate="true",这个属性是验证其他规则的一切,如果没有设置这个属性,其他的任何设置都不会验证。此jquery验证为光标失去焦点的验证事件。

如果需要手动调用验证的话,调用单独的验证方法:$("#panda").validateAllControls(options);输入框的自定义以上面一样设置。

文件的url路径:http://files.cnblogs.com/files/panda-/jquery_validate_1.1.0.js,点击查看,不知道怎么添加压缩文件,这边留下一个url路径,为以后自己备份一份。

以上所述是小编给大家介绍的jQuery验证表单格式的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
js正则表达式中test,exec,match方法的区别说明
Jan 29 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Html5 js实现手风琴效果
Apr 17 #Javascript
jquery做个日期选择适用于手机端示例
Jan 10 #Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
jQuery.parseHTML() 函数详解
Jan 09 #Javascript
微信小程序 用户数据解密详细介绍
Jan 09 #Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 #Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 #Javascript
You might like
php递归删除目录与文件的方法
2015/01/30 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python正则表达式使用经典实例
2016/06/21 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
详解django自定义中间件处理
2018/11/21 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
linux面试题参考答案(4)
2013/01/28 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
企业统计员岗位职责
2013/12/13 职场文书
三八节标语
2014/06/27 职场文书
综合素质自我评价评语
2015/03/06 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
分享几个实用的CSS代码块
2022/06/10 HTML / CSS