jquery 验证插件的改进


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.note {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
//jquery 必须填写的项
(function($){
$.fn.myIsMust = function(options){
        var defaults = {
        }
        options = $.extend(defaults,options); var dom = this;
var val = "";

if(dom.length != 0)
{
if(dom.attr("id").indexOf("DDL_") != -1)
val = "0"; dom.after("<span class='error'></span>");
$("#ButtonManage").click(function()
{
if(dom.val() == val)
{
dom.next(".error").html(dom.parent().find(".note").html());
return false;
}
}) dom.blur(function()
{
if(dom.val() != val)
dom.next(".error").html("");
else
dom.next(".error").html(dom.parent().find(".note").html());
})
}
    }
})(jQuery);$(function(){
    $("#TB_UserName").myIsMust();
$("#DDL_UserGroup").myIsMust();
})
</script></head><body>
<table class="table" style="margin-top:8px;">
<thead>
<tr id="manage_UserName">
<th style="width:120px;">登录名</th>
<td>
<span class="note">必须填写，登录后台的用户名称，可以是中文可以是字母。</span>
<input name="TB_UserName" type="text" id="TB_UserName" />
</td>
</tr><tr id="manage_DirName">
<th style="width:120px;">目录名</th>
<td>
<span class="note">必须为字母</span>
<input name="TB_DirName" type="text" id="TB_DirName" />
</td>
</tr><tr id="manage_BirthDate">
<th style="width:120px;">出生日期</th>
<td>
<span class="note">填写出生年月日,格式1980-10-10</span>
<input name="TB_BirthDate" type="text" id="TB_BirthDate" />
</td>
</tr><tr id="manage_Email">
<th style="width:120px;">邮箱</th>
<td>
<span class="note">用户的Email。</span>
<input name="TB_Email" type="text" id="TB_Email" />
</td>
</tr><tr id="manage_Age">
<th style="width:120px;">年龄</th>
<td>
<span class="note">用户的年龄</span>
<input name="TB_Age" type="text" id="TB_Age" />
</td>
</tr><tr id="manage_UserGroup">
<th style="width:120px;">所在用户组</th>
<td>
<span class="note">选择用户所在的用户组，那么该用户将具备所选用户组的所有权限。</span>
<select name="DDL_UserGroup" id="DDL_UserGroup">
<option selected="selected" value="0">请选择...</option>
<option value="1">管理员</option>
</select>
</td>
</tr>
<tr>
<th>&nbsp;</th>
<td><input type="submit" name="ButtonManage" value="添加" id="ButtonManage" class="button" /><input type="reset" class="button" value='重置' /></td>
</tr>
</table>
</body>
</html>上面代码已经实现了必须填写的项，我想把功能再增强一点。如通过下面设置
$("#TB_DirName").myIsMust({IsMust:false,type:"letter"});
可以设置TB_DirName为非必填项，但是如果输入了字符就必须为字母$("#TB_BirthDate").myIsMust({type:"date"});
可以设置TB_BirthDate为必须填写项，必须为日期格式$("#TB_Email").myIsMust({type:"email"});必须填写项，必须为email格式$("#TB_Age").myIsMust({type:"int"});必须填写项，为数字类型总共需要设置2个参数，都是ismust是否需要填写，默认是true
type为检测的类型，默认为不检测.谢谢各位了~

解决方案 »

  1.   

    发个我自己以前写的，不好请指正得有些基础的人用，不是SG式的，LZ可以用用看
    (function($) {
    /*****************************************************************************************/
    /* check form elements
    /* example: 
    /* [html]
    /* <input type='text' name='userName' /><span id='nameTip'></span>
    /* <input type='button' id='submit' value='update' />
    /* [javascript]
    /* $('#submit').formValidator(
    /* rules: {
    /* 'userName': {
    /* request: true, 不能为空
    /* show: true, 可见时才验证(visibility|display)
    /* maxLen: 30, 最大长度
    /* minLen: 6, 最小长度
    /* valueTo: '1', 与valueTo表示的字符串相同
    /* valueToMsg: '值和valueTo不相同时的提示
    /* valueOff: '2', 与valueOff表示的字符串不相同
    /* valueOffMsg: '值和valueOff相同时的提示
    /* reg: (/\d+/), 要匹配的正则
    /* regMag: '格式不正确', 正则不匹配的提示
    /* matchTo: '#elementAttribute_reg2', 与matchTo表示的element的值相同
    /* matchToMsg: '与xx的输入不一致', 值不相同时的提示
    /* radio: 'elementAttribute_reg3,elementAttribute_reg4'
    /* radioMsg: '以上几项中必填一项,包括当前比较项，此时这几项都要设置为request:false'
    /* ajax: null || {msg: 'loading...', smsg: '成功', emsg: '失败', delay: 10, url: 'xxx.xxx'} 是否进行ajax验证
    /* msg: '' 没有错误时的提示
    /* }
    /* },
    /* tips: function(element, result) {
    /* $('nameTip').html(result.msg);
    /* },
    /* callBack: function(btn, success) {
    /* alert(success);
    /* }
    /* });
    /***************************************************************************************/
    $.fn.formValidator = function(op) {
    var p = $.extend({ajaxList: {}}, $.fn.formValidator.defaultOptions, op);
    $.each(p.rules, function(n, v) {
    if(v.ajax) {
    p.ajaxList[n] = {s: false, v: ''};
    o(n).change(function() {
    p.tips(this, check(this, n));    
    });
    } else {
    o(n).blur(function() {
    p.tips(this, check(this, n));    
    });
    }
    });
    $(this).click(function(e) {
    var s = true;
    var m;
    var t;   
    $.each(p.rules, function(n, v) {
    t = o(n);
    m = check(t, n);
    p.tips(t, m);
    if(!m.success) {
    s = false;
    return false;
    }  
    });
    $.each(p.ajaxList, function(n, v) {
    if(!v.s) {
    s = false;
    return false;
    }
    });
    if(!s) {
    e.preventDefault();
    e.stopPropagation();
    }
    p.callBack(this, s);
    return s;
    });

    function check(o, key) {
    var rule = p.rules[key];
    var element = $(o);
    var defaultMsg = rule.msg || '';
    if((element.css('visibility') == 'hidden' || element.css('display') == 'none') && rule.show) {
    return {success: 1, msg: defaultMsg};
    }
    var v = $.trim(element.val());
    if(v == '') {
    if(rule.request) {
    return {success: 0, msg: '不能为空'};
    } else {
    if(!rule.request.radio) {
    if(typeof(p.ajaxList[key]) != 'underfined') {
    p.ajaxList[key].s = true;
    }
    return {success: 1, msg: defaultMsg};
    } else {
    var is = 0;
    $.each(p.radio.split(','), function(i, v) {
    if($.trim(o(v).eq(0).val()) != '') {
    is = 1;
    return false;
    }   
    });
    return {success: is, msg: (is? defaultMsg : rule.radioMsg)};
    }
    }
    } 
    if(rule.reg && !rule.reg.test(v)) {
    return {success: 0, msg: rule.regMsg};
    }
    if(rule.valueTo && v != rule.valueTo) {
    return {success: 0, msg: rule.valueToMsg};
    }
    if(rule.valueOff && v == rule.valueOff) {
    return {success: 0, msg: rule.valueOffMsg};
    }
    var l = v.replace(/[^\x00-\xff]/g, 'xx').length;
    if(rule.maxLen && l > rule.maxLen) {
    return {success: 0, msg: '长度不能超过' + rule.maxLen + '个字符', len: l};
    }
    if(rule.minLen && l < rule.minLen) {
    return {success: 0, msg: '长度不能小于' + rule.minLen + '个字符', len: l};
    }
    if(rule.matchTo) {
    var s = o(rule.matchTo).eq(0).val();
    if(v != s) {
    return {success: 0, msg: rule.matchToMsg};
    }
    }
    if(rule.ajax) {
    if(p.ajaxList[key].v != element.val()) {
    p.ajaxList[key].s = false;
    p.ajaxList[key].v = element.val();
    $.ajax({
    url: rule.ajax.url,
    type: 'POST',
    data: key + '=' + element.val(),
    success: function(v) {
    if(v) {
    p.ajaxList[key] = true;
    p.tips(element, {success: 1, msg: rule.ajax.smsg});
    } else {
    p.tips(element, {success: 0, msg: rule.ajax.emsg});
    }
    },
    error: function() {
    p.ajaxList[key] = true;
    p.tips(element, {success: 1, msg: rule.ajax.msg});
    }
    });
    }
    return {success: 1, msg: rule.ajax.msg};
    }
    return {success: 1, msg: defaultMsg};
    }

    function o(k) {
    return  $("[name='" + k + "']");
    }
    }
    $.fn.formValidator.defaultOptions = {
    rules:{
    /*'elementAttribute_reg': {
    request: true,
    show: true,
    maxLen: 30,
    minLen: 6,
    valueTo: '1',
    valueToMsg: '值不等于1',
    valueOff: '2',
    valueOffMsg: '值不能等于2',
    reg: (/\d+/),
    regMag: '格式不正确',
    matchTo: 'elementAttribute_reg2',
    matchToMsg: '与xx的输入不一致',
    radio: 'elementAttribute_reg3,elementAttribute_reg4'
    radioMsg: '以上几项中必填一项'
    ajax: null || {msg: 'loading...', smsg: '成功', emsg: '失败', delay: 10, url: 'xxx.xxx'}
    msg: ''
    }*/
    },
    tips: function(element, result) {
    //alert(result.msg);
    },
    callBack: function(btn, success) {
    //alert(success);
    }
    };
    })(jQuery);