常用JS验证控件

最新推荐文章于 2025-10-12 12:45:28 发布

原创最新推荐文章于 2025-10-12 12:45:28 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于JavaScript的表单验证插件JSKeyValidator，该插件提供了丰富的验证规则，包括字符集验证、数字验证、日期比较等，并支持自定义验证规则。通过简单的配置即可实现对表单字段的有效性和格式进行检查。

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://变红并弹出提示                    for( var 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