详解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 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
如何手动实现es5中的bind方法详解
Dec 07 Javascript
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
第十节--抽象方法和抽象类
2006/11/16 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
2016/12/17 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python检测网站链接是否已存在
2016/04/07 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
浅谈django orm 优化
2018/08/18 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
房地产促销活动方案
2014/03/01 职场文书
作风年建设汇报材料
2014/08/14 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript