详解jQuery的表单验证插件--Validation


Posted in Javascript onDecember 21, 2016

大致介绍

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现,并一直更新至今。访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

下载地址:http://xiazai.3water.com/201612/yuanma/jquery-validation-1.14.0_3water.rar

基本语法

 Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件

<script type="text/javascript" src="lib/jquery.js"></script>
 <script type="text/javascript" src="dist/jquery.validate.min.js"></script>

文件引入完毕,先写个简单的表单

<form class="cmxform" id="commentForm" method="get">
 <fieldset>
 <legend>验证完整的表单</legend>
 <p>
 <label for="firstname">名字</label>
 <input id="firstname" name="firstname" type="text">
 </p>
 <p>
 <label for="lastname">姓氏</label>
 <input id="lastname" name="lastname" type="text">
 </p>
 <p>
 <label for="username">用户名</label>
 <input id="username" name="username" type="text">
 </p>
 <p>
 <label for="password">密码</label>
 <input id="password" name="password" type="password">
 </p>
 <p>
 <label for="confirm_password">验证密码</label>
 <input id="confirm_password" name="confirm_password" type="password">
 </p>
 <p>
 <label for="email">Email</label>
 <input id="email" name="email" type="email">
 </p>
 <p>
 <label for="agree">请同意我们的声明</label>
 <input type="checkbox" class="checkbox" id="agree" name="agree">
 </p>
 <p>
 <input class="submit" type="submit" value="提交">
 </p>
 </fieldset>
 </form>

然后我们开始写验证表单的代码

首先我们需要知道那个表单需要验证

$(function(){
 $('#commentForm').validate();
 });

然后开始写验证的规则,要注意这里选择元素是根据每个标签的name属性选择的,基本语法如下

$('#commentForm').validate({
 rules: {
 firstname: 'required',//required 表示是必填字段
 lastname: {
 required: true,
 minlength: 3 // 最小长度是3
 }
 }
 });

从上面可以看出,如果一个信息只有一个验证要求可以写成一行,比如 firstname;如果有多个验证要写成像 lastname 这种形式;知道了基本的语法

在看看Validation都提供了那些校验规则

(1)、required:true 必输字段
(2)、remote:"remote-valid.jsp" 使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true 必须输入正确格式的电子邮件
(4)、url:true 必须输入正确格式的网址
(5)、date:true 必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true 必须输入合法的数字(负数,小数)
(8)、digits:true 必须输入整数
(9)、creditcard:true 必须输入合法的信用卡号
(10)、equalTo:"#password" 输入值必须和#password相同
(11)、accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10] 输入值必须介于 5 和 10 之间
(16)、max:5 输入值不能大于5
(17)、min:10 输入值不能小于10

我们将上面的表单验证完善一下,如下

$(function(){
 $('#commentForm').validate({
 rules: {
 firstname: {
 required: true,
 minlength: 5
 },
 lastname: "required",
 username: {
 required: true,
 rangelength: [4,6]
 },
 password: {
 required: true,
 minlength: 4,
 number: true
 },
 confirm_password: {
 required: true,
 minlength: 3,
 equalTo: '#password'
 },
 email: {
 required: true,
 email: true
 },
 }
 });
 });

效果:

详解jQuery的表单验证插件--Validation

可以看到,这里的提示默认是英文的不太满意,将提示信息更改成中文有两种方式

第一种方式:引入语言文件(推荐)

<script type="text/javascript" src="dist/localization/messages_zh.js"></script>

他的提示信息是:

required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")

第二种方式:自己写提示信息

$('#commentForm').validate({
 rules: {
 firstname: {
 required: true,
 minlength: 5
 },
 lastname: "required",
 username: {
 required: true,
 rangelength: [4,6]
 },
 password: {
 required: true,
 minlength: 4,
 number: true
 },
 confirm_password: {
 required: true,
 minlength: 3,
 equalTo: '#password'
 },
 email: {
 required: true,
 email: true
 }
 },
 messages: {
 firstname: "请输入您的名字",
 lastname: "请输入您的姓氏",
 username: {
 required: "请输入用户名",
 minlength: "用户名必需由两个字母组成"
 },
 password: {
 required: "请输入密码",
 minlength: "密码长度不能小于 5 个字母"
 },
 confirm_password: {
 required: "请输入密码",
 minlength: "密码长度不能小于 5 个字母",
 equalTo: "两次密码输入不一致"
 },
 email: "请输入一个正确的邮箱",
 }
 });

效果:

详解jQuery的表单验证插件--Validation

注意:还有一种写验证的方式是在 class 中写,例如

<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">

但是不推荐这种写法,因为不符合样式与结构分离的要求,并且还需要自己下载一个jquery.metadata.js文件才能够这样写

表单提交问题

可以在表单提交之前执行我们自定义的代码,当我们的自定义代码执行完毕后再提交表单

$('#commentForm').validate({
 submitHandler: function(){
 alert("提交事件成功");
 from.submit();
 }
 });

可以设置validate的默认值

$.validate.setDefaults({
 submitHandler: function(){
 alert("提交成功!");
 form.submit();
 }
 });

只验证不提交表单

$(function(){
 $("#commentForm").validate({
 debug:true;
 });
 });

错误提示信息设置

1、错误信息位置设置

errorPlacement方法是设置错误信息显示在哪,默认值是在验证元素的后面

errorPlacement: function(error, element) { 
 error.appendTo(element.parent()); 
 }

errorClass 是设置错误信息的样式,后跟css类名

errorElement 是设置用什么标签包住错误信息,默认值是<label>

errorLabelContainer 是设置将所有的错误信息包在一个地方

wrapper 是设置用什么标签再把上边的 errorELement 包起来

例如:

errorPlacement: function(error,element){
 $(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error);
 },

是将错误提示信息显示在验证的信息前面

效果:

详解jQuery的表单验证插件--Validation

例如:

errorElement: 'span',
 errorClass: 'commentError',
 errorLabelContainer: $('form div.error'),
 wrapper: 'li',

是将每个提示信息用<span>标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用<li>把每个提示信息包起来

效果:

详解jQuery的表单验证插件--Validation

2、错误信息样式设置

有两种方式可以修改提示信息的样式

第一种就是采用下载Validation时自带的样式文件

<link href="demo/css/screen.css" type="text/css" rel="stylesheet" />

 第二种方式就是自己定义样式(当然也可以修改自带的css文件)

例如添加这样的样式:

input.error { border: 1px solid red; }
 label.error {
 background:url("demo/images/unchecked.gif") no-repeat 0px 0px;
 padding-left: 16px;
 padding-bottom: 2px;
 font-weight: bold;
 color: #EA5200;
 }
 label.checked {
 background:url("demo/images/checked.gif") no-repeat 0px 0px;
 }

效果:

详解jQuery的表单验证插件--Validation

验证时的问题

1、验证的元素通过

验证的元素通过验证时如果要进行操作,可以使用 success ,他可以接受字符串或者是函数,当接受的是字符串的时候是添加样式

例如:

success: function(){
 alert(1);
 },

是在要验证的元素通过验证时,弹出1

例如:

success: "valid"   

是将css样式名为 .valid 添加到元素上

2、验证方式

详解jQuery的表单验证插件--Validation

自定义校验

虽然Validation提供了许多验证的方式,但是有些情况还是不够用的,所以如果要添加自定义的校验方式可以使用 addMethod 方法,通常将自定义的方法写在 additional-methods.js 中,然后要引入这个文件

 <script type="text/javascript" src="dist/additional-methods.js"></script>

写入 additional-methods.js 文件的内容

 例如:

$.validator.addMethod("isZipCode", function(value, element) { 
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
 }, "请正确填写您的邮政编码");

只要把这段代码写入 additional-methods.js 文件就可以使用了

例如:

zipcode: {
 required: true,
 isZipCode :true
 }

效果:

详解jQuery的表单验证插件--Validation

radio 和 checkbox、select 的验证

radio的required表示必须选中一个

checkbox的required表示必须选中,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间

select的required表示选中的value不能为空,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间

总结:Validation插件提供了许多的验证,用户可以自己添加自己的验证和提示信息的样式,但是在博客中我并没有提及与ajax相关的内容,因为ajax还没有学习-_-||,如果有什么问题可以和我探讨,如果有不对的地方,欢迎指正

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
jquery replace方法去空格
May 08 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
JS无缝滚动效果实现方法分析
Dec 21 #Javascript
简单实现JS计算器功能
Dec 21 #Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
You might like
PHP实现下载断点续传的方法
2014/11/12 PHP
php面向对象值单例模式
2016/05/03 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
解决laravel session失效的问题
2019/10/14 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
JSON取值前判断
2014/12/23 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
详解angular element()方法使用
2017/04/08 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
django-crontab 定时执行任务方法的实现
2019/09/06 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
护士自我鉴定范文
2013/10/06 职场文书
应届大学生的推荐信
2013/11/20 职场文书
求职简历自荐信
2014/06/18 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年外联部工作总结
2015/04/03 职场文书
运动会1000米加油稿
2015/07/21 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python