非常灵活实用的页面合法性校验框架 -

bohaiwaiwai

浏览: 26123 次
性别:
来自: 北京

最近访客更多访客>>

exclamation

scx_white

吴柳昊

zhangly2011

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

非常灵活实用的页面合法性校验框架

博客分类：

validation

jQuery validate 灵活便捷实用前台校验框架

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" class="OrderEditInp">
　　</dd>
　　<dd>
<span>排序：</span>
　　<input validate_id="required:true,isNumber:true"
　　validate_desc="required:'请输入排序',isNumber:'请输入合法的数字'"
　　name="sort" type="text" class="OrderEditInp">
　　</dd>
</form>
待扩展
　　目前只能校验form表单中的元素，对非表单元素校验有待于扩展。欢迎大家丰富。。。

分享到：