不论是出于用户体验的考虑，还是出于安全角度的考虑，在网站开发过程中，涉及到表单提交时都会需要进行表单校验，而表单校验往往涉及到很多字段及规则。使用原生JS自实现一套校验框架麻烦且低效，Jquery Validation作为Jquery的一个插件，提供了非常强大而且简单易用的校验功能。
Jquery Validation核心功能我认为就分为两部分，其实校验最关心的也就这两部分：
（1）每个表单字段是校验规则是怎样的？——rules
（2）每个表单字段校验后如何提示？——messages
更进一步，有些常用的规则插件可以预先定义好，如果用户有其它特殊的需要，也支持用户自定义校验规则。校验提示又包括成功提示，以及错误提示。当然还包括一些辅助功能，比如什么时候触发校验、校验通过提交表单前做些额外的动作等等。
话不多说，下面直接示例。（关于插件的具体使用方法可以参考官网文档，或者w3cschool的使用教程。建议先看教程后再看本实用示例。）
示例校验效果如下图：
详细代码如下：
一、表单页面
页面为了样式的美观引入了bootstrap框架，同时引入的Jquery、Jquery Validation插件。主要演示的是常用校验规则的使用。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap --> <link href="statics/css/bootstrap.min.css" rel="stylesheet"> <!-- 这里引入的是校验提示的样式 --> <link href="statics/css/valid.css" rel="stylesheet"> </head> <body> <div class="container"> <form action="" id="myform" class="form-horizontal" role="form"> <fieldset class="text-center"> <legend> Jquery Validation使用示例 </legend> <div class="form-group"> <label class="col-sm-4 control-label" for="name">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" name="name" id="name"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="email">电子邮箱</label> <div class="col-sm-4"> <input type="text" class="form-control" name="email" id="email"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="url">URL地址</label> <div class="col-sm-4"> <input type="text" class="form-control" name="url" id="url"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="dateISO">日期</label> <div class="col-sm-4"> <input type="text" class="form-control" name="dateISO" id="dateISO"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="number">数字</label> <div class="col-sm-4"> <input type="text" class="form-control" name="number" id="number"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="digits">整数</label> <div class="col-sm-4"> <input type="text" class="form-control" name="digits" id="digits"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="password">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" name="password" id="password"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="confPwd">再次输入密码</label> <div class="col-sm-4"> <input type="password" class="form-control" name="confPwd" id="confPwd"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="notEqualTo">输入不等于0的任意字符</label> <div class="col-sm-4"> <input type="text" class="form-control" name="notEqualTo" id="notEqualTo"> </div> </div> <div class="form-actions "> <button type="submit" class="btn btn-primary btn-large">提交</button> <button type="reset" class="btn">取消</button> </div> </fieldset> </form> </div> <!-- js --> <script src="statics/js/import/jquery-1.11.1.js"></script> <script src="statics/js/import/jquery.validate.js"></script> <script src="statics/js/import/bootstrap.min.js"></script> <!-- 这里引入的是校验提示信息的JS文件 --> <script src="statics/js/import/messages_zh.js"></script> <!-- 这里引入的是表单校验的JS文件 --> <script src="statics/js/my/myvalidation.js"></script> <!-- 这里引入的是扩展Jquery validation的自定义JS文件 --> <script src="statics/js/my/additional-methods.js"></script> </body> </html>
二、JS校验文件
$(function() {
$('#myform').validate(
{
rules : {
name : {
required : true
},
email : {
required : true,
email : true
},
url:{
required : true,
url:true,
},
dateISO:{
required : true,
dateISO:true
},
number:{
required : true,
number:true
},
digits:{
required : true,
digits:true
},
password:{
required : true,
password:true
},
confPwd:{
required : true,
password:true,
equalTo:"#password"
},
notEqualTo:{
required : true,
notEqualTo: "0"
}
},
messages:{
confPwd:{
equalTo:"与上面输入的密码不一致"
}
},
success : "valid",
errorClass:"error",
errorPlacement: function(error, element) {
error.appendTo(element.parent().parent());
}
});
});
$(function() {
//自定义密码校验规则
$.validator.addMethod("password", function(value, element, params) {
//5~10位数字和字母的组合
var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/;
return this.optional(element) || pwd.test(value);
}, $.validator.format("密码必须是5~10位数字和字母的组合"));
//自定义不等于校验规则
$.validator.addMethod("notEqualTo", function(value, element, params) {
return value!=params;
}, $.validator.format("输入必须不为0"));
});
三、JS提示文件
这里定义一个统一的提示文件，在页面较多时能大大节省代码量。
$.extend($.validator.messages, {
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} 的数值")
});
四、CSS效果
这里定义校验成功或者失败后的显示样式。
label.valid {
width: 24px;
height: 24px;
background: url(../img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
float:left;
}
label.error {
font-weight: bold;
color: red;
margin-top: 2px;
float:left;
}
示例在Chrome浏览器测试通过，完整示例请查看附件。
备注：
（1）插件还包括不少其它的功能，比如设置什么时候触发校验，忽略校验字段，表单提交前作额外的操作等等。这里只演示了最常用也是最实用的部分，其它更加全面的参考文中给出的教程地址。
（2）插件的默认校验规则中，Remote在实际实用中也经常出现，主要用于ajax请求后台判断该字段有没有重复等情况。这里由于没写后台逻辑，故没写示例。实际remote后面就是一个ajax请求方法，在后台直接返回"true"或者"false"就可以了。前后台校验的示例可以查看我的文章前后台校验示例。
（3）在插件的使用过程中，个人认为最佳实践是把校验提示使用单独的JS文件，如上面实例所示，如果觉得统一的提示不太定制化，可以再考虑在validate方法中添加对应的messages覆盖掉统一提示。另外，自定义的校验规则也考虑使用独立的JS文件，这样在页面较多的时候，公共的校验可以公用。
相关推荐
本文以validation 1.10版本和jQuery 1.8.1为基础进行讲解。 ### 一、JQuery Validation 插件简介 JQuery Validation插件的主要功能是验证HTML表单中的输入数据。它支持多种内置验证规则，例如`required`（必填）、...
**jQuery经典教程示例** jQuery 是一款广泛应用于前端开发的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个压缩包中的"JQueryPPT"很可能包含了一系列关于jQuery的...
本篇文章将详细讲解如何在jQuery Validation Engine中调用外部函数进行验证。 ### 1. 调用外部函数验证 在jQuery Validation Engine的文档中，提到可以使用`funcCall[自定义函数名]`来调用自定义函数进行验证。...
本文将深入探讨如何使用jQuery进行表单验证，并基于"jQuery Validation Engine"这一强大的验证插件进行详细讲解。 ### 1. jQuery基础知识 在讨论jQuery表单验证之前，首先需要了解jQuery的基本用法。jQuery通过...
jQuery拥有庞大的插件生态系统，如用于图片轮播的jQuery Cycle，表单验证的jQuery Validation，以及各种滑动菜单和弹窗插件等，这些都极大地扩展了jQuery的功能。 **jQuery与JavaScript的关系** jQuery是建立在...
2. **验证**：使用jQuery的验证插件，如jQuery Validation Plugin，对输入的数据进行实时验证，例如检查邮箱格式、密码强度等。 3. **Ajax提交**：注册过程与登录类似，只是提交的数据和服务器端的验证逻辑更复杂，...
《江哥带你玩转JQuery代码资料》是一个专注于讲解JQuery编程技巧和实践的资源集合，由知名前端开发者李南江（江哥）提供。这个压缩包包含了丰富的JQuery学习材料，旨在帮助初学者和进阶者提升在前端开发中的JQuery...
7. **插件**：介绍jQuery生态中的流行插件，如jQuery UI、jQuery Validation等，以及如何集成和使用它们。 8. **API参考**：提供完整的jQuery函数和方法的参考手册，方便开发者查找具体功能。 而“jQuery2.CHM”...
这个"jquery插件集合"包含了一系列与jQuery相关的实用插件，旨在帮助开发者提高开发效率，提升用户体验。下面将详细介绍其中涉及到的一些关键知识点。 1. **表单验证插件（jQuery-validation）** jQuery-...
课程会讲解如何查找和引入第三方jQuery插件，如用于轮播图的Slick插件，或用于表单验证的jQuery Validation插件。同时，也会简单介绍插件的工作原理和如何根据需求定制自己的jQuery插件。 教案中会包含每个主题的...
6. 插件生态系统：jQuery拥有丰富的插件库，如用于图片轮播的jQuery Cycle，表单验证的jQuery Validation Plugin，以及各种其他增强网页功能的插件。这些插件进一步扩展了jQuery的功能，让开发者能够快速实现复杂的...
7. **插件使用**: jQuery拥有庞大的插件生态系统，如用于表单验证的jQuery Validation Plugin，或者用于图片轮播的bxSlider。 【jQuery学习路径】 初学者应首先掌握jQuery的基本选择器和DOM操作，理解如何通过...
本篇将对jQuery中的核心概念、常用函数和技术进行深入讲解。 ### 1. jQuery选择器 jQuery提供了丰富的选择器，使得我们能够更方便地选取DOM元素。例如： - `$("#id")`：通过ID选择元素。 - `$(".class")`：通过类名...
6. **插件生态**：jQuery拥有庞大的插件生态系统，如用于图像轮播的jQuery Carousel，表单验证的jQuery Validation Plugin，以及用于弹出对话框的jQuery UI Dialog等。 书中配套的源码涵盖了这些概念的实际应用，...
本教程将通过PPT的形式，深入浅出地讲解jQuery的核心概念和实用技巧。 ### 一、jQuery简介 jQuery是由John Resig在2006年创建的，它的目标是“使JavaScript编程变得更简单”。jQuery的核心理念是“Write Less, Do ...
下面将详细阐述jQuery的核心知识点，并结合描述中的“常用插件”和“demo”进行讲解。 一、jQuery基础 1. 选择器：jQuery的选择器基于CSS，如`$("#id")`选择ID为id的元素，`$(".class")`选择所有class为class的...
**jQuery无刷新验证详解** ...通过以上讲解，你应该对使用jQuery实现无刷新验证有了全面的理解。实践是最好的老师，尝试创建自己的验证示例，加深理解并不断提升技能。希望这个教程对你的学习有所帮助！
7. **插件生态**: jQuery 有一个庞大的插件生态系统，例如 jQuery UI 提供了拖放、日期选择器等用户界面组件，而 jQuery Validation 插件则用于表单验证。 8. **链式操作**: jQuery 方法返回的是jQuery对象，允许...
在文档中，你将了解到每个jQuery函数的参数、返回值、使用示例及注意事项。对于初学者，建议从基础选择器和DOM操作开始，然后逐步学习事件、动画和Ajax，最后深入研究插件和自定义扩展。同时，结合实际项目实践，将...