jquery-validate.js

一、简介

jquery-validate.js是一个表单验证的jquery插件。

二、准备

导入一下两个js

jquery.js/jquery

jquery.validate.js /validate

三、参考资料

官网：http://jqueryvalidation.org/

中文参考：http://www.runoob.com/jquery/jquery-plugin-validate.html

4、综合应用

本例使用的版本是1.14.0

目录

自定义公用js

/** * @author  * @时间 2015-11-25 * @功能 校验 * 使用jquery插件：jquery-validation-1.14.0 * @参考 http://www.runoob.com/jquery/jquery-plugin-validate.html **//***********初始化加载开始**************/$(function(){/* @公用校验 * @class格式 JV_Xxx * */$.validator.addClassRules({JV_Required:{required:true//必须输入的字段。插件自带校验},JV_Email:{email:true//必须输入正确格式的电子邮件。插件自带校验},JV_Url:{url:true//必须输入正确格式的网址。插件自带校验},JV_Number:{number:true//必须输入合法的数字（负数，小数）。插件自带校验},JV_Digits:{digits:true//必须输入整数。插件自带校验},JV_ZipCode:{isZipCode:true//邮政编码。自定义校验},JV_Mobile:{mobile:true//手机号码。自定义校验}});/*@添加新的校验 *@注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。 *@注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用  *@新的校验放在../jqueryValidate/dist/additional-methods.js * *//************************默认设置****************************//* * @样式 * *//* * @修改默认message【显示信息】为中文 * @引入本地化js文件 <script src="../js/messages_zh.js" type="text/javascript"></script> * */jQuery.extend(jQuery.validator.messages, {    required: "必填字段",remote: "请修正该字段",email: "请输入正确格式的电子邮件",url: "请输入合法的网址",date: "请输入合法的日期",dateISO: "请输入合法的日期 (ISO).",number: "请输入合法的数字",digits: "只能输入整数",creditcard: "请输入合法的信用卡号",equalTo: "请再次输入相同的值",accept: "请输入拥有合法后缀名的字符串",maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),max: jQuery.validator.format("请输入一个最大为{0} 的值"),min: jQuery.validator.format("请输入一个最小为{0} 的值")});/* * 设置jquery的默认值 * */$.validator.setDefaults({debug:true //调试模式，校验但不提交。});});/***********初始化加载结束**************/

在页面的需要校验的，添加相应的class

定义新样式

引入js

在自己js中

样式

@CHARSET "UTF-8";/********错误显示样式*********/input.error,select.error{border:1px solid red;border-radius: 3px;-moz-border-radius: 3px;-khtml-border-radius: 3px;-webkit-border-radius: 3px;-ms-border-radius: 3px;box-shadow:4px 2px 6px #000;-khtml-box-shadow:4px 2px 6px #000;-ms-box-shadow:4px 2px 6px #000;-webkit-box-shadow:4px 2px 6px #000;-moz-box-shadow:4px 2px 6px #000;position:relative;/*定位*/}label.error { color:Red; font-size:13px; margin-left:5px; padding-left:17px; background: url(error.png) left no-repeat; background-color:#FFFFDA; /*放在background后面才不会被覆盖*/background-size:16px 16px;border:1px solid #C3AB88;border-radius: 6px;-moz-border-radius: 6px;-khtml-border-radius: 6px;-webkit-border-radius: 6px;-ms-border-radius: 6px;display: inline !important;/*显示在同一行上*/position:absolute;/*相对于父元素的绝对定位*/</span>} 

效果