一、简介
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>
}
效果