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 当前日期转化为中文的实现代码
May 13 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
浅谈javascript的闭包
Jan 23 Javascript
vue-loader教程介绍
Jun 14 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
vue 解决IOS10低版本白屏的问题
Nov 17 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 7中不要做的10件事
2016/09/18 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
SVG实现时钟效果
2018/07/17 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
Python3离线安装Requests模块问题
2019/10/13 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
军训的自我鉴定
2013/12/10 职场文书
七年级生物教学反思
2014/01/30 职场文书
李开复演讲稿
2014/05/24 职场文书
表扬稿格式范文
2015/01/16 职场文书
师德承诺书
2015/01/20 职场文书
2015年毕业生实习评语
2015/03/25 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Golang中channel的原理解读(推荐)
2021/10/16 Golang
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏