非常灵活实用的页面合法性校验框架
jQuery validate本身是一个非常灵活实用的校验框架，实现了大部分的前台校验情况。
validate进一步封装
wos_validate.js
$(document).ready(
function() {
一）/**//* 设置修改默认属性，使validate符合自己的要求 */
$.validator.setDefaults({
submitHandler : function(form) {
// 防重复提交校验
$(form).find(":submit").attr("disabled", true).attr("value","提交中...");
form.submit();
},
// 设置错误提示元素，默认span
errorElement:'div',
// 设置提示信息样式
errorClass:'error_desc',
// 忽略什么样的元素，默认 hidden、disable...
ignore:''
});
二） 下面是自定义校验方法，提供自己特殊或符合具体业务的校验
// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element)
|| /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value,
element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element)
|| (length >= param[0] && length <= param[1]);
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
// 字符长度校验 汉字 字母均按1个计算
jQuery.validator.addMethod("charLength", function(value,
element, param) {
var length = value.length;
return length <= param;
}, "请确保输入的值在${0}字符之内(一个中文字算1个字符)");
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
return this.optional(element)
|| (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; // 电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
// 验证数字
jQuery.validator.addMethod("isNumber", function(value, element) {
var num = /^[0-9]*$/;
return this.optional(element) || (num.test(value));
}, "请正确填写您的电话号码");
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element)
|| (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
// 价格金额
jQuery.validator.addMethod("isPrice", function(value, element) {
var price = /^\d+\.?\d{0,2}$/;//--/^[0-9]*.?[0-9]*$/;
return this.optional(element) || (price.test(value));
}, "请正确填写您的价格金额");
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
jQuery.validator.addMethod("endDate",
function(value, element,param) {
var startDate = $(param).val();
return new Date(Date.parse(startDate.replace("-", "/"))) <= new Date(Date.parse(value.replace("-", "/")));
},
"结束日期必须大于开始日期!");
jQuery.validator.addMethod("nowDate",
function(value, element) {
return new Date() <= strToDate(value);
},
"所选时间不能早于当前时间");
jQuery.validator.addMethod("mulityName",
function(value, element,param) {
$.ajax({
type:"GET",
contentType:'application/json',
url:'mulityName.json',
async:false, //同步方法，如果用异步的话，flag永远为1
data:{'param':param},
success: function(msg){
if(msg == 'yes'){
flag = 0;
}
}
});
if(flag == 0){
return false;
}else{
return true;
}
},
"当前值已经存在请重新输入新值");
jQuery.validator.addMethod("dateTime",
function(value, element) {
return /^(?:(?:(?:(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(\/|-)(?:0?2\1(?:29)))|(?:(?:(?:1[6-9]|[2-9]\d)?\d{2})(\/|-)(?:(?:(?:0?[13578]|1[02])\2(?:31))|(?:(?:0?[1,3-9]|1[0-2])\2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))\2(?:0?[1-9]|1\d|2[0-8])))))\s(?:([0-1]\d|2[0-3]):[0-5]\d:[0-5]\d)$/m.test(value);
},
"请输入合法的时间（Time）");
jQuery.validator.methods.compareDate = function(value, element, param) {
var startDate = jQuery(param).val();
var date1 = strToDate(startDate);
var date2 = strToDate(value);
return date1 < date2;
};
function strToDate(str) {
var tempStrs = str.split(" ");
var dateStrs = tempStrs[0].split("-");
var year = parseInt(dateStrs[0], 10);
var month = parseInt(dateStrs[1], 10) - 1;
var day = parseInt(dateStrs[2], 10);
var date ;
if(tempStrs[1].length>0){
var timeStrs = tempStrs[1].split(":");
var hour = parseInt(timeStrs [0], 10);
var minute = parseInt(timeStrs[1], 10) - 1;
var second = parseInt(timeStrs[2], 10);
date = new Date(year, month, day, hour, minute, second);
}else{
date = new Date(year, month, day);
}
return date;
}
三） . 改善jQuery validate的校验方式：被动校验--》主动校验
// 开始验证
// 获取所有的form表单
$('form').each(function(){
// 获取每个form中所有需要校验的（带有validate_id和_desc(可选)）校验规则和信息，并进行格式化成validate所要的格式
var wosRules = '';
var erroDesc = '';
$(this).find(':input[validate_id]').each(function(){
var rule = $(this).attr('validate_id');
wosRules = wosRules + $(this).attr('name') + ":{"+ rule + '},';
if( $(this).attr('validate_desc')!=undefined){
erroDesc = erroDesc + $(this).attr('name') + ":{"+ $(this).attr('validate_desc') + '},';
}
});
wosRules = "{" + wosRules.substring(0,wosRules.length-1) + "}";
erroDesc = "{" + erroDesc.substring(0,erroDesc.length-1) + "}";
var wosORules = eval('(' + wosRules + ')');
//console.log(wosRules);
//console.log(erroDesc);
$(this).validate({
//设置规则
rules:wosORules,
//rules:{name:{required:true},sort:{required:true,isNumber:true}},
//设置错误信息
messages:eval('(' + erroDesc + ')'),
//messages:{sort:{required:'请输入排序',isNumber:'请输入合法的数字'}},
/**//* 设置验证触发事件 */
focusInvalid : false,
onkeyup : false,
/**//* 设置错误信息提示DOM */
errorPlacement : function(error, element) {
error.appendTo(element.parent());
}
});
});
});
校验框架使用
1. 引入js包：
<script
src="<%=request.getContextPath()%>/common/js/jquery/jquery-1.10.2.min.js"></script>
<script src="<%=request.getContextPath()%>/common/js/jquery/jquery.validate.min.js"></script>
<script
src="<%=request.getContextPath()%>/common/js/jquery/messages_zh.js"></script>
<script
src="<%=request.getContextPath()%>/common/js/page/wos_validate.js"></script>
2. 在需要校验的表单的元素中添加validate_id 和可选的 validate_desc 元素属性
validate_id规则：required：true，isNumber:true,compareTo:startDate...
Validate_desc规则：isNumber:‘请输入合法的数字’,compareTo:‘结束时间不能大于开始时间’
例子：
<form id="addcategory_form" ...
<dd>
<span for="name">分类名称：</span>
<input validate_id="required:true,charLength:30"
name="name" type="text" type="text" class="OrderEditInp">
</dd>
</form>
待扩展
目前只能校验form表单中的元素，对非表单元素校验有待于扩展。欢迎大家丰富。。。
