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分页脚本
May 21 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
js实现简单进度条效果
Mar 25 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php文本转图片自动换行的方法
2013/03/13 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
高级人员简历的自我评价分享
2013/11/03 职场文书
上课打牌的检讨书
2014/02/15 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Python 多线程处理任务实例
2021/11/07 Python