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小测验(代码集合)
Jul 27 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
js 调用百度分享功能
Feb 27 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
php GD绘制24小时柱状图
2008/06/28 PHP
php 文本文件的读取效率
2012/02/10 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
php源码的安装方法和实例
2019/09/26 PHP
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Apache如何部署django项目
2017/05/21 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
英国团购网站:Groupon英国
2017/11/28 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
运动会稿件200字
2014/02/07 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
MySQL表字段时间设置默认值
2021/05/13 MySQL
golang中的struct操作
2021/11/11 Golang
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL