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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
javascript中如何判断类型汇总
May 14 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js实现选项卡效果
Mar 07 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
2016/10/04 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
浅谈react 同构之样式直出
2017/11/07 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python实现socket端口重定向示例
2014/02/10 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
Python闭包的定义和使用方法
2022/04/11 Python
Golang Web 框架Iris安装部署
2022/08/14 Python