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 相关文章推荐
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
JS实现页面侧边栏效果探究
Jan 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
php,不用COM,生成excel文件
2006/10/09 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
Js动态创建div
2008/09/25 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js cookies实现简单统计访问次数
2009/11/24 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python global全局变量函数详解
2018/09/18 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
小学新学期寄语
2014/04/02 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
单位委托书怎么写
2014/09/21 职场文书