JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验。
基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有插件对应, validate插件便是一个。
官网地址 : http://jqueryvalidation.org/
官网文档:http://jqueryvalidation.org/documentation/
下面网址是开发者提供的demo, 代码可下载, 可以给大家提供参考:
http://jquery.bassistance.de/validate/demo/index.html
本文要介绍validate插件使用方法, 与特殊功能
校验规则设置
以 required规则为例子说明,有以下两个方法, 属性|class+valdate接口 或者 validate 接口设置规则参数。
相比方法1,方法2代码更加集中,逻辑清晰,方便维护。且方法一种 属性 required与HTML5冲突了, 放在class中会污染class的纯净性。
方法1,添加required属性,
<p><label for="ccomment">Your comment (required)</label><textarea id="ccomment" name="comment" required></textarea></p>
或者 添加 required 到class中
<p><label for="ccomment">Your comment (required)</label><textarea id="ccomment" name="comment"class=“required”></textarea></p>
然后找到form DOM调用validate接口,完成表单规则设置动作:
$("#commentForm").validate();
方法2, 直接使用validate接口设置规则:
$(".selector").validate({rules: {// simple rule, converted to {required:true}name: "required",// compound rule email: {required: true,email: true}} });
错误提示区域的样式自定义
插件默认提供的错误提示是, 在校验控件的右侧给予一个 红色字符串 显示, 如果希望给错误提示语, 换个位置和添加样式, 就需要使用插件提供的接口了。
validate 提供 errorPlacement 接口, 可以定制错误提示的样式和位置。 http://jqueryvalidation.org/?s
本文给出, 将错误提示语放在报错控件下方, 并添加错误提示边框和背景色的方法:
新增validate扩展JS文件 formValidateExt.js:
$.validator.setDefaults({errorPlacement: function (error, element) {/* 生成显示错误提示HTML DOM */var tipHTML = "<div class=\"errorLabelWraper\"></div>";var tipObj = $(tipHTML);error.appendTo(tipObj);tipObj.insertAfter(element);var offset = element.offset();var top = offset.top + element.height();var left = offset.left;console.log("top="+top)console.log("height="+element.height())console.log("left="+left)tipObj.css("top", top);tipObj.css("left", left);} });//手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9])|(15[0-9])|(18[0-9])|(170))\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); //电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码");
新增validate扩展css文件 formValidateExt.css:
div.errorLabelWraper{position: absolute;display:inline-block;padding-left: 5px;line-height: 30px;border:2px solid #A9A9A9;background-color: #FEFEFE;border-radius:5px;-webkit-border-radius: 5px;-moz-border-radius: 5px; }label.error{color: #FF0000; }
HTML示例文件:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script><script type="text/javascript" src="../formValidateExt.js"></script><script type="text/javascript" src="../jquery.cityselect.js"></script> <link rel="stylesheet" type="text/css" href="../formValidateExt.css" /> </head> <body><form id="form1" method="post" action=""><fieldset><legend>Gender</legend><label for="gender_male"><input type="radio" id="gender_male" value="m" name="genderRadio">Male</label><label for="gender_female"><input type="radio" id="gender_female" value="f" name="genderRadio">Female</label></fieldset><fieldset><legend>Spam</legend><label for="spam_email"><input type="checkbox" class="checkbox" id="spam_email" value="email" name="spamCheckbox">Spam via E-Mail</label><label for="spam_phone"><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spamCheckbox">Spam via Phone</label><label for="spam_mail"><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spamCheckbox">Spam via Mail</label></fieldset><p><label for="jungleSelect">Please select a jungleSelect noun</label><br><select id="jungleSelect" name="jungleSelect"><option value=""></option><option value="1">Buga</option><option value="2">Baga</option><option value="3">Oi</option></select></p><p><label for="phoneNum">phoneNum</label><input id="phoneNum" name="phoneNum" type="text" /><p><div id="city"> address<select class="prov" name="prov" ></select> <select class="city" name="city"></select> <!-- <select class="dist" disabled="disabled"></select> --></div> <p><input id="submit" class="submit" type="submit" value="Submit"></p></form><script type='text/javascript'> $(document).ready(function() {$("#city").citySelect(); $("#form1").validate({groups: {address: "prov city"},rules: {genderRadio: {required: true,},spamCheckbox: {required: true,}, jungleSelect: {required: true,},prov: {required: true,},city: {required: true,},phoneNum: {required: true,isMobile: true,remote: "checkSame.php"}},messages: {phoneNum: {remote: $.validator.format("{0} 已经注册过。")}}});});</script> </body> </html>
服务器端校验
对于一些校验,不能够在浏览器端实现的, 例如手机号重复,姓名重复等, 需要后台检索数据库给结果的情况,
validate插件提供了 remote规则, 可以实现远程校验:例如上例中phoneNum添加的规则, “checkSame.php”是后台的校验文件路径:
remote: "checkSame.php"
下面给出 此文件后台实现, true表示校验通过, false表示不通过:
<?php if($_GET) {$phoneNum = $_GET['phoneNum'];if($phoneNum == '123456'){echo 'false';}else{echo 'true';}exit(); } ?>
注释: 上例中, 还有一个省市联动的JQuery插件(js/jquery.cityselect.js
),
可以完成表单中选择省份和城市的功能, 见 http://www.helloweba.com/view-blog-188.html
JQuery 表单校验插件 validate 使用纪录相关推荐
- 轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
- 【前端3】jquary:页面加载,选择器,隔行换色,Dom,全选,动画,遍历,广告/抽奖,表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 表单校验,在开发中是非常常见的,为了防止用户误操作,填写错误数据,亦或是防止用户恶意提交数据等,都需要前端同学来做一些简单 ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- jQuery 表单验证插件jQuery Validation Engine用法详解
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. jQuery Validation ...
- 一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...
最新文章
- 不要假装很努力,因为结果不会陪你演戏
- 支持向量机(三)核函数
- mysql--MySQL数据库的简单认识
- vue写自定义指令(全局或者组件内部)
- 基于javaweb的教师信息管理系统
- 【自编教材】16万8千字的HTML+CSS基础 适合从0到1-可收藏
- 开机出现grub rescue,修复办法
- 水星路由器设置显示服务器,新款水星无线路由器设置_新版水星(MERCURY)路由器设置教程-192路由网...
- Android setLayoutparams失效几个原因
- 代码赏析:子窗口对于键盘和鼠标的响应
- plt.contour
- UCOSIII实时操作系统------软件定时器
- 浅谈压缩感知(十三):压缩感知与传统压缩
- 整理的大学生所需信息的各个网站首页
- 美女图库,python爬虫
- 通达OA 任意用户登录漏洞复现
- macOS iTerm2 简单使用
- javascript选项卡切换样式
- 通达信指标源码,一键自动改写成选股器
- 得实Dascom TL-220Z 打印机驱动
热门文章
- 计算机及网络应用基础思维导图_计算机基础/算法/面试题 PDF+思维导图下载
- WordPress插件扫描工具plecost
- 切割图形_3D打印、激光切割、图形化编程,六一科普活动喊你来报名啦!
- mock模拟的数据能增删改查吗_Mock.js模拟数据,脱离后端独立开发,实现增删改查功能...
- linux下更新硬盘FW,Intel SSD硬盘 FW 更新方法
- 从运动脑机接口到情绪脑机接口:情绪脑机接口
- 学习java的一些笔记(8)
- 分数混合运算简便方法_分数四则混合运算
- 虚拟机复制后需要改什么_网站改版后为什么需要每月运营维护?
- 贝佐斯明抢马斯克太空生意:数十亿美元组卫星互联网,5年内发射3236颗卫星...