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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 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
德劲1103的维修打理经验
2021/03/02 无线电
4.与数据库的连接
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
javascript实现评分功能
2020/06/24 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
linux 下实现python多版本安装实践
2014/11/18 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
2014年变电站工作总结
2014/12/19 职场文书
幼儿园保育员随笔
2015/08/14 职场文书