万能通用智能JS表单验证

源码下载地址:http://download.csdn.net/detail/kimizhou_blog/4399392

Validator.js 和 Default.html
 这个JS通用新很强,注意结合html中的的样式就好了,以及样式中的图片地址就好了,样式我已经写死在html中的

Validator.js


作者: 虞益川
2009-7-1  转用请标明出处

Validator = {
    Require: /.+/,
    Email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    Phone: /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
    Mobile: /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
    Url: /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
    IdCard: "this.IsIdCard(value)", Currency: /^\d+(\.\d+)?$/,
    Number: /^\d+$/, Zip: /^[1-9]\d{5}$/, QQ: /^[1-9]\d{4,8}$/,
    Integer: /^[-\+]?\d+$/, Double: /^[-\+]?\d+(\.\d+)?$/,
    English: /^[A-Za-z]+$/, Chinese: /^[\u0391-\uFFE5]+$/,
    Username: /^[a-z]\w{3,}$/i,
    UnSafe: /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
    Date: /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[12]\d|3[12])(   (0?\d|1\d|2[0-4]):(0?\d|[1-5]\d):(0?\d|[1-5]\d))?$/,
    Title: /^.{1,60}$/,
    IsSafe: function(str) { return !this.UnSafe.test(str); },
    SafeString: "this.IsSafe(value)",
    Filter: "this.DoFilter(value, getAttribute('accept'))",
    Limit: "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
    LimitB: "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
    Date: "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
    Repeat: "value == document.getElementsByName(getAttribute('to'))[0].value",
    Range: "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
    Compare: "this.compare(value,getAttribute('operator'),getAttribute('to'))",
    Custom: "this.Exec(value, getAttribute('regexp'))",
    Group: "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
    ErrorItem: [document.forms[0]], ErrorMessage: ["以下原因导致提交失败:\t\t\t\t"],
    Validate: function(theForm, mode) {
        var obj = theForm || event.srcElement;
        var count = obj.elements.length;
        this.ErrorMessage.length = 1;
        this.ErrorItem.length = 1;
        this.ErrorItem[0] = obj;
        for (var i = 0; i < count; i++) {
            with (obj.elements[i]) {
                var _dataType = getAttribute("dataType");
                if (typeof (_dataType) == "object" || typeof (this[_dataType]) == "undefined") continue;
                this.ClearState(obj.elements[i]); if (getAttribute("require") == "false" && value == "") continue;
                switch (_dataType) {
                    case "IdCard":
                    case "Date":
                    case "Repeat":
                    case "Range":
                    case "Compare":
                    case "Custom":
                    case "Group":
                    case "Limit":
                    case "LimitB":
                    case "SafeString":
                    case "Filter":
                        if (!eval(this[_dataType])) {
                            this.AddError(i, getAttribute("msg"));
                        }
                        break;
                    default:
                        if (_dataType == "Title") {
                            var tempValue = value.replace(/[^\x00-\xff]/g, "**");
                            if (!this[_dataType].test(tempValue)) {
                                this.AddError(i, getAttribute("msg"));
                            }
                        }
                        else {
                            if (!this[_dataType].test(value)) {
                                this.AddError(i, getAttribute("msg"));
                            }
                        }
                        break;
                }
            }
        }
        if (this.ErrorMessage.length > 1) {
            mode = mode || 1;
            var errCount = this.ErrorItem.length;
            switch (mode) {
                case 2:
                    for (var i = 1; i < errCount; i++) this.ErrorItem[i].style.color = "red";
                case 1:
                    this.ErrorItem[1].focus();
                    break; //alert(this.ErrorMessage.join("\n"));
                case 3:
                    for (var i = 1; i < errCount; i++) {
                        try {
                            var div = document.createElement("DIV");
                            div.id = "__ErrorMessagePanel";
                            //span.style.color = "red";
                            div.className = "error_info";
                            this.ErrorItem[i].parentNode.appendChild(div);
                            div.innerHTML = this.ErrorMessage[i].replace(/\d+:/, "*");
                        }
                        catch (e) {
                            //alert(e.description);
                        }
                    }
                    if (errCount > 1) {
                        //if (this.ErrorItem[errCount - 1].type != "hidden") 
                        //this.ErrorItem[errCount - 1].focus();
                    }
                    break;
                default:
                    //alert(this.ErrorMessage.join("\n"));
                    break;
            }
            return false;
        }
        return true;
    },
    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; }, ClearState: function(elem) { with (elem) { if (style.color == "red") style.color = ""; var lastNode = parentNode.childNodes[parentNode.childNodes.length - 1]; if (lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError: function(index, str) { this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec: function(op, reg) { return new RegExp(reg, "g").test(op); }, compare: function(op1, operator, op2) { switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked: 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; }, DoFilter: function(input, filter) { return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input); }, IsIdCard: function(number) { var date, Ai; var verify = "10x98765432"; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; var area = ['', '', '', '', '', '', '', '', '', '', '', '北京', '天津', '河北', '山西', '内蒙古', '', '', '', '', '', '辽宁', '吉林', '黑龙江', '', '', '', '', '', '', '', '上海', '江苏', '浙江', '安微', '福建', '江西', '山东', '', '', '', '河南', '湖北', '湖南', '广东', '广西', '海南', '', '', '', '重庆', '四川', '贵州', '云南', '西藏', '', '', '', '', '', '', '陕西', '甘肃', '青海', '宁夏', '新疆', '', '', '', '', '', '台湾', '', '', '', '', '', '', '', '', '', '香港', '澳门', '', '', '', '', '', '', '', '', '国外']; var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); if (re == null) return false; if (re[1] >= area.length || area[re[1]] == "") return false; if (re[2].length == 12) { Ai = number.substr(0, 17); date = [re[9], re[10], re[11]].join("-"); } else { Ai = number.substr(0, 6) + "19" + number.substr(6); date = ["19" + re[4], re[5], re[6]].join("-"); } if (!this.IsDate(date, "ymd")) return false; var sum = 0; for (var i = 0; i <= 16; i++) { sum += Ai.charAt(i) * Wi[i]; } Ai += verify.charAt(sum % 11); return (number.length == 15 || number.length == 18 && number == Ai); }, IsDate: function(op, formatString) { formatString = formatString || "ymd"; var m, year, month, day; switch (formatString) { case "ymd": m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); if (m == null) return false; day = m[6]; month = m[5] * 1; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy": m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); if (m == null) return false; day = m[1]; month = m[3] * 1; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default: break; } if (!parseInt(month)) return false; month = month == 0 ? 12 : month; var date = new Date(year, month - 1, day); return (typeof (date) == "object" && year == date.getFullYear() && month == (date.getMonth() + 1) && day == date.getDate()); function GetFullYear(y) { return ((y < 30 ? "20" : "19") + y) | 0; } }
}




<!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>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/Validator.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
     <style type="text/css" >
         .error_info{border: 1px solid #FF7105;BACKGROUND: url(cuo.gif) #FFF5D9 no-repeat; background-position: 5px 3px; height:23px; line-height:23px; text-indent:25px; margin-top:3px; margin-bottom:3px;   font-size:12px}
    </style>
</head>
<body>
    <form id="formContent">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" check=".+" msg="用户名不能为空,且不能含有空格" name="UserName" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>帐号:</td>
                <td><input type="text" check=".+" msg="账号不能为空,且不能含有空格" name="UserAccount" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>密码:</td>
                <td><input type="password" check=".+" msg="密码不能为空,且不能含有空格" name="PWD" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>手机:</td>
                <td><input type="text" check=".+" msg="手机不能为空,且不能含有空格" name="Tell" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>联系地址:</td>
                <td><input type="text" check=".+" msg="联系地址不能为空,且不能含有空格" name="Address" datatype="Require"/></td>
                <td></td>
            </tr>
             <tr>
                <td>电子邮箱:</td>
                <td><input type="text" check=".+" msg="邮箱格式不正确" name="Mark" datatype="Email" /></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="button" value="提交" οnclick="onSubmit()" /></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </form>

    <script type="text/javascript" language="javascript">
        function onSubmit() {
            var bret = Validator.Validate($('#formContent')[0], 3);
            if (bret)
                alert("成功!");
        }

    </script>


</body>
</html>


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
插件简介:使用HTML标签属性,快速实现常用表单验证功能 JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert(自定义函数提示) , return(将错误提示直接返回) @param options.msg_func 自定义错误提示调用的函数,填写自定义提示函数名,插件自动传入参数(错误信息以及自定义参数);默认(alert) @param options.focus 移动焦点到错误元素,默认关闭(false) 插件说明:利用 html 标签属性,表单自动验证;支持 为空、正则匹配、函数、非空匹配等验证 html标签属性说明: 1.vf-cate (可选)元素表单类型,可自动验证;支持:text,number,email,hidden,password,textarea,select,date,checkbox,radio 等 2.vf-type (必填验证类型[可多个,用 "|" 进行分割],支持:empty(为空验证),reg(正则匹配),func(函数调用),item(元素值比较,例如:item:#pwd 或 item:.pwd),length(长度验证,例 length:10 或 length:10-100)以及其他常用类型:mobile,tel,email,url,number,idcard,password,username,gbk 等 3.vf-msg (必填验证错误提示[可多个,用 "|" 进行分割,顺序与vf_type对应] 4.vf-func (可选)调用验证的函数,当vf-type中包含 func 时,则必填;插件自动传入当前元素的JQ对象 5.vf-reg (可选)正则验证表达式,当vf-type中包含 reg 时,则必填 6.vf-name (可选)验证规则标识。可将当前规则->设置为全局验证规则(名称后加"/g");在同一页面下,可直接多次使用属性 vf-name 调用已有的全局规则,调用全局规则时无需加"/g" 7.vf-null (可选)非空验证:yes/no;开启后,若数据为空,则跳过当前数据验证 注: 1.验证表单元素,需要添加 class 名 : vf-validate 方开启验证; 2.当使用 vf_func 调用其他验证函数时,会传入“当前元素”;且需要在验证函数中返回验证状态:true(验证成功),其他或false皆为验证失败 * 插件返回值: 1.当 options.msg_type 等于 alert 时:验证成功返回 true , 失败返回 false; 2.当 options.msg_type 等于 return 时:验证成功返回 true , 失败返回 错误信息; 3.当插件发生错误异常,也会直接 return 错误信息。所以判断时,建议以返回true为验证通过,其他皆视为不通过;
使用时请将下面的javascript代码存到一个单一的js文件中。 1、表单要求 <form name="formname" onSubmit="return validateForm(this)"></form> 将对表单中的所有以下类型的域依次验证,所有验证是去除了前导和后缀空格的,要注意是区分大小写的。 2、空值验证 表单中任意域加上emptyInfo属性将对此域是否为空进行验证(可以和最大长度验证\一般验证方式同时使用)。 无此属性视为此域允许空值。   如:<input type="text" name="fieldNamename" emptyInfo="字段不能为空!"> 3、最大长度验证(可以和空值验证、一般验证方式同时使用): <input type="text" name="fieldNamename" maxlength="20" lengthInfo="最大长度不能超过20!"> 或,<textarea maxlength="2000" lengthInfo="最大长度不能超过2000!"> 3、一般验证方式(不对空值做验证):   如:<input type="text" validator="^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" > 4、标准验证(不与其它验证方式同时使用): 全部通过<input type="hidden">来实现,并且不需要name属性以免提交到服务器。   4.1、合法日期验证: <input type="text" name="yearfieldName" value="2004">注:这里也可以是<select name="yearfieldName"></select>,以下同 <input type="text" name="monthfieldName" value="02"> <input type="text" name="dayfieldName" value="03"> <input type="hidden" validatorType="DateGroup" year="yearfieldName" month="monthfieldName" day="dayfieldName" errorInfo="不正确的日期!"> yearfieldName、monthfieldName、dayfieldName分别为年月日字段,月和日可以是两位(MM)或一位格式(M), 此处不对每个字段分别检验(如果要检验,请在年月日三个域分别使用前面的一般验证方式),只对日期的最大值是否合法检查; 4.2、日期格式验证(请注意,此验证不对日期是否有效进行验证,还未找到从格式中得到年月日数据的方法^_^): <input type="text" name="datefieldName" value="2003-01-03 21:31:00"> <input type="hidden" validatorType="Date" fieldName="datefieldName"; format="yyyy-MM-dd HH:mm:ss" errorInfo="不正确的日期!"> 其中格式仅对y、M、d、H、m、s进行支持(其它字符视为非时间的字符) 4.3、列表验证: 检验列表(checkbox、redio、select)是否至少选中了一条记录(对select主要用于多项选择) <input type="checkbox" name="checkbox1"> <input type="hidden" validatorType="Checkbox" fieldName="checkbox1" errorInfo="请至少选中一条记录!"> 其中validatorType可以是Checkbox、R、Select; 对于一个select表单,如果要求选择一条不能是第一条的记录,请用下列方式: <select name="select1" emptyInfo="请选择一个选项!"> <option value="">==请选择==</option> <option value="1">1</option> <select> 4.4、Email验证: <input type="text" name="email"> <input type="hidden" fieldName="email" validatorType="Email" / errorInfo="不正确的Email!"> 其中separator为可选项,表示输入多个email时的分隔符(无此选项只能是一个地址) 4.5、加入其它javascript操作: <script type="text/javascript"> function functionname(){ 自定义方法 } </script> 表单中加入<input type="hidden" validatorType="javascript" functionName="functionname">(此时emptyInfo等属性无效) 时将调用function属性中指定的javascript方法(要求方法返回true或false,返回false将不再验证表单,也不提交表单)。 5、在表单通过验证提交前disable一个按钮(也可将其它域disable,不能与其它验证同在一个域),不要求按钮是表单中的最后一个 <input type="button" name="提交" validatorType="disable"> 6、不验证表单   <input type="hidden" name="validate" value="0" functionName="functionname"> 当validator域值为0时不对表单进行验证,直接提交表单或执行指定function并返回true后提交表单 functionName为可选
JavaScript 表单验证是一个非常常见的需求,可以通过 JavaScript验证表单是否符合指定的格式要求。 以下是一个简单的表单验证示例: ```html <html> <head> <title>表单验证</title> <script type="text/javascript"> function validateForm() { var name = document.forms["myForm"]["name"].value; var email = document.forms["myForm"]["email"].value; if (name == "") { alert("请填写姓名"); return false; } if (email == "") { alert("请填写电子邮件地址"); return false; } if (email.indexOf("@") == -1) { alert("请输入有效的电子邮件地址"); return false; } return true; } </script> </head> <body> <form name="myForm" onsubmit="return validateForm()" method="post"> <label for="name">姓名:</label> <input type="text" name="name" id="name"><br> <label for="email">电子邮件地址:</label> <input type="email" name="email" id="email"><br> <input type="submit" value="提交"> </form> </body> </html> ``` 在这个例子中,我们使用了 `validateForm()` 函数来验证表单。首先,我们获取了表单中的姓名和电子邮件地址,然后逐一进行验证。如果某个字段未填写或者电子邮件地址不符合格式要求,就会弹出相应的提示信息并返回 `false`。最后,如果表单中的所有字段都符合要求,就会返回 `true`,表单就会被提交。 在实际项目中,表单验证可能会更加复杂。可以使用正则表达式等工具来进行更加精确的验证

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值