常用JS验证控件

jskey_validator.js

View Code
/**
 * 名称命名规则说明
 * 首字母大写,非常少用的尽可能用Custom
 * 注:如果添加了方法形式的,记得在Validate中的case中补上
 * --------------------------------------------------------
 * skey:增加了默认的msg提示,以大量减少页面上的msg属性
 * skey:修改使支持非表单形式的元素值校验,如根据父元素ID校验所有需要校验的子元素
 * skey:增加alertMsg提示,弹出的信息可以与页面显示信息不同,默认与msg一致
 * skey:修改部分正则表达式,并重命名所有内部函数
 * skey:删除从未使用的部分验证,并作了部分小修改
 * 最后更新时间:2012-05-13 23:30
 
*/
if(typeof ($jskey) != "object")
{
    $jskey = {};
}
$jskey.validator =
{
    "Char":{"value":/^[A-Za-z0-9_]+$/, "msg":"允许英文字母、数字、下划线"},
    //"Chinese":{"value":/^[\u0391-\uFFE5]+$/, "msg":"只允许中文"},
    "Chinese":{"value":/^[\u4e00-\u9fa5]+$/, "msg":"只允许中文"},
    "Email":{"value":/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "msg":"格式错误,如test@test.com"},
    "English":{"value":/^[A-Za-z]+$/, "msg":"只允许英文字母"},
    "IdCard":{"value":/^\d{15}(\d{2}[A-Za-z0-9\*])?$/, "msg":"只能输入18位的身份证号码"},
    "Mobile":{"value":/^((0\d{2,3}\d{6,15})|(1[358]{1}\d{9}))$/, "msg":"请输入手机号码(纯数字)"},
    "Money":{"value":/^(([1-9](\d+)?)|0)(\.\d+)?$/, "msg":"请输入金额"},
    "Numeral":{"value":/^\d+$/, "msg":"请输入数字"},
    "Phone":{"value":/^((0\d{2,3})|(\(0\d{2,3}\)))?(-)?[1-9]\d{6,7}(([\-0-9]+)?[^\D]{1})?$/, "msg":"请输入电话号码"},
    "Require":{"value":/\S+/, "msg":"必填"},
    "RequireCompact":{"value":/^\S+$/, "msg":"必填(无空格)"},//必填且不能有空格
    "RequireTrim":{"value":/(^[^\s]{1}(.+)?[^\s]{1}$)|(^[^\s]{1}$)/, "msg":"必填(无前后空格)"},//前后不能有空格
    "Url":{"value":/^http(s)?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, "msg":"格式错误,如http:\/\/127.0.0.1:80"},
    "Zip":{"value":/^[1-9]\d{5}$/, "msg":"邮政编码不存在"},
    
    "Number":{"value":"this._Number(value)", "msg":"请输入数值"},
    "NumberPlus":{"value":"this._NumberPlus(value)", "msg":"请输入正数"},
    "NumberMinus":{"value":"this._NumberMinus(value)", "msg":"请输入负数"},
    "Integer":{"value":"this._Integer(value)", "msg":"请输入整数"},
    "IntegerPlus":{"value":"this._IntegerPlus(value)", "msg":"请输入正整数"},
    "IntegerMinus":{"value":"this._IntegerMinus(value)", "msg":"请输入负整数"},
    
    "Custom":{"value":"this._Custom(value, getAttribute('regexp'))", "msg":""},
    "DateCheck":{"value":"this._DateCheck(value, getAttribute('operator'), document.getElementById(getAttribute('to')).value, getAttribute('require'))", "msg":"日期不正确"},
    "Filename":{"value":"this._Filename(value)", "msg":"文件名不能为空,且不能包含下列字符 \\ \/ \: \* \? \" < >"},
    "Filter":{"value":"this._Filter(value, getAttribute('accept'))", "msg":""},
    "Group":{"value":"this._Group(getAttribute('name'), getAttribute('min'), getAttribute('max'))", "msg":""},
    "Limit":{"value":"this._Limit(value.length, getAttribute('min'), getAttribute('max'))", "msg":""},
    "LimitB":{"value":"this._Limit(this._LenB(value), getAttribute('min'), getAttribute('max'))", "msg":""},
    "Password":{"value":"this._Password(value)", "msg":"密码不符合安全规则"},
    "Repeat":{"value":"value == document.getElementById(getAttribute('to')).value", "msg":"重复输入不一致"},
    "Range":{"value":"this._Range(value, getAttribute('min'), getAttribute('max'))", "msg":""},
    "UploadFile":{"value":"this._UploadFile(value)", "msg":"请上传文件"},
    "UploadFileCheck":{"value":"this._UploadFileCheck(value)", "msg":"有文件未上传,请上传或取消(清空上传内容)"},
    
    ErrorObj:[],
    ErrorMsg:["\u4ee5\u4e0b\u539f\u56e0\u5bfc\u81f4\u63d0\u4ea4\u5931\u8d25\uff1a\t\t\t\t"],//ErrorMsg:["以下原因导致提交失败:\t\t\t\t"],
    AlertMsg:["\u4ee5\u4e0b\u539f\u56e0\u5bfc\u81f4\u63d0\u4ea4\u5931\u8d25\uff1a\t\t\t\t"],//AlertMsg:["以下原因导致提交失败:\t\t\t\t"],
    
    Validate:function()
    {
        var formID = arguments[0] || "";//formID和inputID必须有一个不为空,校验一组表单
        var mode = arguments[1] || "";//不能为空
        var inputID = arguments[2] || "";//formID和inputID必须有一个不为空,校验单个表单
        var obj = null;
        if(formID == null || formID.length == 0)
        {
            obj = {arr : []};
            var _o = document.getElementById(inputID);
            var _dt = _o.getAttribute("dataType");
            if(typeof (_dt) == "object" || typeof (this[_dt]) == "undefined")
            {
            }
            else
            {
                obj.arr.push(_o);
            }
        }
        else
        {
            obj = document.getElementById(formID) || event.srcElement;
            if(obj == null || obj.arr == null)
            {
                obj.arr = [];
                var _t = obj.getElementsByTagName('*');
                var _dt;
                for(var i = 0;i < _t.length;i++)
                {
                    _dt = _t[i].getAttribute("dataType");
                    if(typeof (_dt) == "object" || typeof (this[_dt]) == "undefined" || this[_dt] == "")
                    {
                        continue;
                    }
                    obj.arr.push(_t[i]);
                }
            }
        }
        var count = obj.arr.length;
        var errMsg = "";
        var alertMsg = "";
        this.ErrorMsg.length = 1;
        this.AlertMsg.length = 1;
        this.ErrorObj.length = 1;
        this.ErrorObj[0] = obj;
        for(var i = 0;i < count;i++)
        {
            with(obj.arr[i])
            {
                var _dataType = getAttribute("dataType");
                if(typeof (_dataType) == "object" || typeof (this[_dataType]) == "undefined")
                {
                    continue;
                }
                this.ClearState(obj.arr[i]);
                if(getAttribute("require") == "false" && value == "")
                {
                    continue;
                }
                if(getAttribute("msg") == null)
                {
                    errMsg = this[_dataType].msg;
                }
                else
                {
                    errMsg = getAttribute("msg");
                }
                if(getAttribute("alertMsg") == null || typeof (getAttribute("alertMsg")) == "undefined")
                {
                    alertMsg = errMsg;
                }
                else
                {
                    alertMsg = getAttribute("alertMsg");
                }
                switch(_dataType)
                {
                    case "Number":
                    case "NumberPlus":
                    case "NumberMinus":
                    case "Integer":
                    case "IntegerPlus":
                    case "IntegerMinus":
                    
                    case "Custom":
                    case "DateCheck":
                    case "Filename":
                    case "Filter":
                    case "Group":
                    case "Limit":
                    case "LimitB":
                    case "Password":
                    case "Repeat":
                    case "Range":
                    case "UploadFile":
                    case "UploadFileCheck":
                        if(!eval(this[_dataType].value))
                        {
                            this.AddError(i, errMsg, alertMsg);
                        }
                        break;
                    default:
                        if(!this[_dataType].value.test(value))
                        {
                            this.AddError(i, errMsg, alertMsg);
                        }
                        break;
                }
            }
        }
        if(this.ErrorMsg.length > 1)
        {
            mode = mode || 1;
            var errCount = this.ErrorObj.length;
            switch(mode)
            {
                case 2://变红并弹出提示
                    forvar i = 1;i < errCount;i++)
                    {
                        this.ErrorObj[i].style.color = "#ff0000";
                    }
                case 1://弹出提示
                    alert(this.AlertMsg.join("\n"));
                    //this.ErrorObj[1].focus();
                    break;
                case 4://弹出提示并显示错误信息
                    alert(this.AlertMsg.join("\n"));
                case 3://显示错误信息
                    for(var i = 1;i < errCount;i++)
                    {
                        try
                        {
                            var span = document.createElement("SPAN");
                            span.id = "__ErrorMsgPanel";
                            span.style.color = "#ff0000";
                            this.ErrorObj[i].parentNode.appendChild(span);
                            span.innerHTML = this.ErrorMsg[i].replace(/\d+:/, "");//"*"
                        }
                        catch(e)
                        {
                            alert(e.description);
                        }
                    }
                    break;
                default:
                    alert(this.AlertMsg.join("\n"));
                    break;
            }
            return false;
        }
        return true;
    },
    ClearState:function(elem)
    {
        with(elem)
        {
            if(style.color == "#ff0000")
            {
                style.color = "";
            }
            var lastNode = parentNode.childNodes[parentNode.childNodes.length - 1];
            if(lastNode.id == "__ErrorMsgPanel")
            {
                parentNode.removeChild(lastNode);
            }
        }
    },
    AddError:function(index, emsg, amsg)
    {
        this.ErrorObj[this.ErrorObj.length] = this.ErrorObj[0].arr[index];
        this.ErrorMsg[this.ErrorMsg.length] = this.ErrorMsg.length + ":" + emsg;
        this.AlertMsg[this.AlertMsg.length] = this.AlertMsg.length + ":" + amsg;
    },
    //判断是否为格式正确的数字,小数点后可带0(如可以为-1,1,1.1等等)
    _Number:function(v)
    {
        if(!isNaN(v))
        {
            if(v.length == 0 || v.indexOf("+") != -1)
            {
                return false;
            }
            if(v.indexOf(".") == 0 || v.indexOf("-.") == 0 || v.indexOf("00") == 0 || v.indexOf("-00") == 0 || v.lastIndexOf(".") == v.length - 1)
            {
                return false;
            }
            return true;
        }
        return false;
    },
    //判断是否为正值数字(如可以为0,1.1等等)
    _NumberPlus:function(v)
    {
        if(this._Number(v))
        {
            if(v.indexOf("-") != -1)
            {
                return false;
            }
            return true;
        }
        return false;
    },
    //判断是否为负值数字(如可以为-1.1,-2等等)
    _NumberMinus:function(v)
    {
        if(this._Number(v))
        {
            if(v.indexOf("-") != -1)
            {
                return true;
            }
        }
        return false;
    },
    //判断是否为整数(如可以为-1,1等等)
    _Integer:function(v)
    {
        if(this._Number(v))
        {
            if(v.indexOf(".") != -1)
            {
                return false;
            }
            return true;
        }
        return false;
    },
    //判断是否为正整数(如可以为2等等)
    _IntegerPlus:function(v)
    {
        if(this._Integer(v))
        {
            if(v.indexOf("-") != -1)
            {
                return false;
            }
            return true;
        }
        return false;
    },
    //判断是否为负整数(如可以为-2,-0等等,注0只能为-0)
    _IntegerMinus:function(v)
    {
        if(this._Integer(v))
        {
            if(v.indexOf("-") != -1)
            {
                return true;
            }
        }
        return false;
    },
    _Custom:function(op, reg)
    {
        return new RegExp(reg, "g").test(op);
    },
    _DateCheck:function(op1, operator, op2, require)
    {
        if(require == "false" && op2.length == 0)
        {
            return true;//一个为空时是否不较验
        }
        try
        {
            if(op1.length == 0 || op2.length == 0)
            {
                return false;
            }
            var d1 = _ToDate(op1);
            var d2 = _ToDate(op2);
            if(typeof (d1) != "object" || typeof (d2) != "object")
            {
                return false;
            }
            switch(operator)
            {
                case "==":
                    return(d1 == d2);
                case "!=":
                    return(d1 != d2);
                case ">":
                    return(d1 > d2);
                case ">=":
                    return(d1 >= d2);
                case "<":
                    return(d1 < d2);
                case "<=":
                    return(d1 <= d2);
                default:
                    return(d1 >= d2);
            }
        }
        catch(e)
        {
        }
        return false;
        function _ToDate(op)
        {
            try
            {
                var m, year, month, day;
                m = op.match(new RegExp("^(\\d{4})([-./])(\\d{1,2})\\2(\\d{1,2})$"));//(\\n指匹配第几个括号)
                if(m == null)
                {
                    return "";
                }
                day = m[4];
                month = m[3] * 1;
                year = m[1];
                if(!parseInt(month))
                {
                    return "";
                }
                month = month == 0 ? 12 : month;
                return new Date(year, month - 1, day);
            }
            catch(ee)
            {
            }
            return "";
        }
    },
    //合法文件名,文件名不能包含\/:*?"<>
    _Filename:function(v)
    {
        if(v.length == 0)
        {
            return false;
        }
        if(v.indexOf("\\") == -1
                && v.indexOf("\/") == -1
                && v.indexOf("\:") == -1
                && v.indexOf("\*") == -1
                && v.indexOf("\?") == -1
                && v.indexOf("\"") == -1
                && v.indexOf("<") == -1
                && v.indexOf(">") == -1
                && v.indexOf(".") != 0
                && v.lastIndexOf(".") != (v.length - 1)
            )
        {
            return true;
        }
        return false;
    },
    _Filter:function(input, filter)
    {
        return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
    },
    _Group:function(name, min, max)
    {
        var groups = document.getElementsByName(name);
        var hasChecked = 0;
        min = min || 1;
        max = max || groups.length;
        for(var i = groups.length - 1;i >= 0;i--)
        {
            if(groups[i].checked)
            {
                hasChecked++;
            }
        }
        return min <= hasChecked && hasChecked <= max;
    },
    _Limit:function(len, min, max)
    {
        min = min || 0;
        max = max || Number.MAX_VALUE;
        return min <= len && len <= max;
    },
    _LenB:function(str)
    {
        return str.replace(/[^\x00-\xff]/g, "**").length;
    },
    _Password:function(str)
    {
        return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(str));
    },
    _Range:function(str, min, max)
    {
        min = min || (-1 * Number.MAX_VALUE);
        max = max || Number.MAX_VALUE;
        return min <= str && str <= max;
    },
    //用于jskey_upload或jskey_multiupload的校验,不为0和空则为已上传,等于0或空则为未上传
    _UploadFile:function(v)
    {
        if(v != "")
        {
            if(v == "0")
            {
                return false;
            }
            return true;
        }
        return false;
    },
    //用于jskey_upload或jskey_multiupload的校验,file表单为空则返回true,不为空则选择了文件未进行上传
    _UploadFileCheck:function(v)
    {
        return v == "";
    },
    //默认自带一些校验方法
    submit:function(containerid, submitid, type)
    {
        if(this.Validate(containerid, 3))
        {
            if(type == null || type != "select")
            {
                var _msg = "是否确定提交?";
                if(type == "insert")
                    _msg = "是否确定提交?";
                else if(type == "update")
                    _msg = "是否确定保存?";
                if(!confirm(_msg))
                {
                    return false;
                }
            }
            document.getElementById(submitid).click();
            return true;
        }
        return false;
    }
};

 

部分操作样例:

jskey_validator_demo.html

View Code
<script type="text/javascript" src="../jskey_validator.js"></script>

<script type="text/javascript">
function check(type)
{
    
if(type < 1)type = 1;
    
if(type > 4)type = 4;
    
if(!$jskey.validator.Validate("dataForm", type))
    {
        
return false;
    }
    alert(
"验证通过");
}
</script>
<center>
<input type="button" value="验证模式一" onclick="check(1);" />&nbsp;
<input type="button" value="验证模式二" onclick="check(2);" />&nbsp;
<input type="button" value="验证模式三" onclick="check(3);" />&nbsp;
<input type="button" value="验证模式四" onclick="check(4);" />
<br />
<div id="dataForm">
<table border="0" cellspacing="1" cellpadding="0" class="listTable" style="width:600px;">
    <tr>
        <td style="width:30%;">作用</td>
        <td style="width:70%;">示例</td>
    </tr>
    <tr>
        <td>英文字母、数字、下划线</td>
        <td><input type="text" id="Char" name="Char" dataType="Char" value="" /></td>
    </tr>
    <tr>
        <td>中文</td>
        <td><input type="text" id="Chinese" name="Chinese" dataType="Char" value="" /></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><input type="text" id="Email" name="Email" dataType="Email" value="" /></td>
    </tr>
    <tr>
        <td>身份证号码</td>
        <td><input type="text" id="IdCard" name="IdCard" dataType="IdCard" value="" /></td>
    </tr>
    <tr>
        <td>手机号码(纯数字)</td>
        <td><input type="text" id="Mobile" name="Mobile" dataType="Mobile" value="" /></td>
    </tr>
    <tr>
        <td>金额</td>
        <td><input type="text" id="Money" name="Money" dataType="Money" value="" /></td>
    </tr>
    <tr>
        <td>数字</td>
        <td><input type="text" id="Numeral" name="Numeral" dataType="Numeral" value="" /></td>
    </tr>
    <tr>
        <td>电话号码</td>
        <td><input type="text" id="Phone" name="Phone" dataType="Phone" value="" /></td>
    </tr>
    <tr>
        <td>必填</td>
        <td><input type="text" id="Require" name="Require" dataType="Require" value="" /></td>
    </tr>
    <tr>
        <td>必填(无空格)</td>
        <td><input type="text" id="RequireCompact" name="RequireCompact" dataType="RequireCompact" value="" /></td>
    </tr>
    <tr>
        <td>前后不能有空格</td>
        <td><input type="text" id="RequireTrim" name="RequireTrim" dataType="RequireTrim" value="" /></td>
    </tr>
    <tr>
        <td>Url</td>
        <td><input type="text" id="Url" name="Url" dataType="Url" value="" /></td>
    </tr>
    <tr>
        <td>邮政编码</td>
        <td><input type="text" id="Zip" name="Zip" dataType="Zip" value="" /></td>
    </tr>
    <tr>
        <td>数值</td>
        <td><input type="text" id="Number" name="Number" dataType="Number" value="" /></td>
    </tr>
    <tr>
        <td>正数</td>
        <td><input type="text" id="NumberPlus" name="NumberPlus" dataType="NumberPlus" value="" /></td>
    </tr>
    <tr>
        <td>负数</td>
        <td><input type="text" id="NumberMinus" name="NumberMinus" dataType="NumberMinus" value="" /></td>
    </tr>
    <tr>
        <td>整数</td>
        <td><input type="text" id="Integer" name="Integer" dataType="Integer" value="" /></td>
    </tr>
    <tr>
        <td>正整数</td>
        <td><input type="text" id="IntegerPlus" name="IntegerPlus" dataType="IntegerPlus" value="" /></td>
    </tr>
    <tr>
        <td>负整数</td>
        <td><input type="text" id="IntegerMinus" name="IntegerMinus" dataType="IntegerMinus" value="" /></td>
    </tr>
    <tr>
        <td>限制大小</td>
        <td><input type="text" id="Compare" name="Compare" dataType="Compare" msg="18以上" to="18" operator=">=" value="" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>默认(&gt;=) (==) (!=) (&gt;) (&gt;=) (&lt;) (&lt;=)</td>
    </tr>
    <tr>
        <td>日期比较</td>
        <td>
        开始:<input type="text" id="DateCheckTo" name="DateCheckTo" value="" /><br />
        结束:<input type="text" id="DateCheck" name="DateCheck" dataType="DateCheck" operator=">=" to="DateCheckTo" value="" />
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>默认(&gt;=) (==) (!=) (&gt;) (&gt;=) (&lt;) (&lt;=)</td>
    </tr>
    <tr>
        <td>文件名</td>
        <td><input type="text" id="Filename" name="Filename" dataType="Filename" value="" /></td>
    </tr>
    <tr>
        <td>所在省份:</td>
        <td>
            广东<input name="Province" value="1" type="radio" />
            陕西<input name="Province" value="2" type="radio" />
            浙江<input name="Province" value="3" type="radio" />
            江西<input name="Province" value="4" type="radio" dataType="Group"  msg="必须选定一个省份" />
        </td>
    </tr>
    <tr>
        <td>爱好:</td>
        <td>
            运动<input name="Favorite" value="1" type="checkbox" />
            上网<input name="Favorite" value="2" type="checkbox" />
            音乐<input name="Favorite" value="3" type="checkbox" />
            看书<input name="Favorite" value="4" type="checkbox"" dataType="Group" min="2" max="3"  msg="必须选择2~3种爱好" />
        </td>
    </tr>
    <tr>
        <td>输入长度范围</td>
        <td><input type="text" id="Limit" name="Limit" dataType="Limit" min="10" max="20" msg="长度10到20字" value="" /></td>
    </tr>
    <tr>
        <td>输入长度范围(字符)</td>
        <td><input type="text" id="LimitB" name="LimitB" dataType="LimitB" min="10" max="20" msg="长度10到20字节" value="" /></td>
    </tr>
    <tr>
        <td>重复</td>
        <td>
            密码:<input type="text" id="RepeatTo" name="RepeatTo" dataType="Password" value="" /><br />
            重复:<input type="text" id="Repeat" name="Repeat" dataType="Repeat" to="RepeatTo" value="" />
        </td>
    </tr>
    <tr>
        <td>限制大小</td>
        <td><input type="text" id="Range" name="Range" dataType="Range" max="20" msg="小于20" value="" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input type="text" id="Range2" name="Range2" dataType="Range" min="10" max="20" msg="数字10到20" value="" /></td>
    </tr>
</table>
</div>
</center>

 

以上是旧版本内容,有少许bug

新版下载和更新地址

http://www.cnblogs.com/skey_chen/archive/2012/07/18/2596926.html

 

 

posted @ 2009-11-25 11:31  一辈子的守候  阅读(2452)  评论(2编辑  收藏  举报