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表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
JavaScript实现三级联动效果
Jul 15 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
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 cdata 处理(详细介绍)
2013/07/05 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
DEFER怎么用?
2006/07/01 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
简单的Python人脸识别系统
2020/07/14 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
运动会广播稿400字
2014/01/25 职场文书
2014中考励志标语
2014/06/05 职场文书
学籍证明模板
2015/06/18 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python