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 DOM 学习第三章 内容表格
Feb 19 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 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
DISCUZ 分页代码
2007/01/02 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php短址转换实现方法
2015/02/25 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python生成requirements.txt的两种方法
2019/09/18 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python如何爬取动态网站
2020/09/09 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
模范教师事迹材料
2014/02/10 职场文书
库房管理员岗位职责
2014/03/09 职场文书
建筑工地标语
2014/06/18 职场文书
涨价通知
2015/04/23 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS