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 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
vue实现图片按比例缩放问题操作
Aug 11 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中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP最常用的正则表达式
2017/02/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
JS Array对象入门分析
2008/10/30 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
在Python中表示一个对象的方法
2019/06/25 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
如何查看python关键字
2021/01/17 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
运动员口号
2014/06/09 职场文书
资料员岗位职责
2015/02/10 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
详解TypeScript的基础类型
2022/02/18 Javascript
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers