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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python单例设计模式实现解析
2020/01/07 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
伦敦一卡通:The London Pass
2018/11/30 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
管理科学大学生求职信
2013/11/13 职场文书
办理生育手续介绍信
2014/01/14 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
运动会致辞稿50字
2014/02/04 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
程序员求职信
2014/04/16 职场文书
企业安全标语
2014/06/07 职场文书
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS