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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
Echarts动态加载多条折线图的实现代码
May 24 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版自动生成文章摘要
2008/07/23 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php中in_array函数用法分析
2014/11/15 PHP
php连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
php文件上传类的分享
2017/07/06 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
解放web程序员的输入验证
2006/10/06 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
javascript History对象原理解析
2020/02/17 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
基于python中theano库的线性回归
2018/08/31 Python
python学习开发mock接口
2019/04/28 Python
python3对接mysql数据库实例详解
2019/04/30 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
机电一体化专业应届本科生求职信
2013/09/27 职场文书
2014学年自我鉴定
2014/02/23 职场文书
校园绿化美化方案
2014/06/08 职场文书
学校端午节活动总结
2015/02/11 职场文书
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
Linux中文件的基本属性介绍
2022/06/01 Servers