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实现的页面关键字密度查询代码
Dec 27 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
JS常用算法实现代码
2016/11/14 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python中if嵌套命令实例讲解
2021/02/25 Python
HTML5标签小集
2011/08/02 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
乡镇干部先进事迹材料
2014/02/03 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
高中生学习计划书
2014/09/15 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫