浅谈表单验证js封装

表单验证js封装

         表单验证在项目中可以说是必不可少的部分，只要有输入就有表单验证，从最简单的验证为不为空，到复杂的验证特殊字符，验证是不是邮箱，电话等特殊字符。当然最基本的原理大家都知道，就是用正则表达式。

         但是多个文本框需要验证，网站建设小编说都要重复的调用写好的一个又一个的验证函数么？项目做了一段时间，开始重新整合自己的代码，发现表单验证这块可以提出来，重 新封装一下。在网上参考了大家不同的封装方法，都觉得不是自己想要的，于是就“自己动手，丰衣足食“自己仿照之前做mvc的时候controller的那 种命名方法封了一个表单验证js:

//文本框验证方法
//需要验证的文本框的name属性，需要按照”xx“+type 这样的格式，其中xx随意，xx为传入的参数，例如想要验证输入的是否为中文，则name="xxChinese"
    function Validation(name){
        var t = $("input[name^=" + name + "]");
        for (var i = 0; i < t.length; i++) {
            if (t[i].value == null || t[i].value == "") {
                t[i].focus();
                t[i].select();
                myMsg("不能为空");
                return false;
                break;
            } else {
                switch (t[i].name) {
                    case name+"English": if (isEnglish(t[i].value) == false) {
                        t[i].focus();
                        t[i].select();
                        alert("请输入英文");
                        return false;
                    }
                        break;
                    case name+"Chinese": if (isChinese(t[i].value) == false) {
                        t[i].focus();
                        t[i].select();
                        alert("请输入中文");
                        return false;
                    }
                        break;
                    case name+"Phone": if (isPhone(t[i].value) == false) {
                        t[i].focus();
                        t[i].select();
                        alert("请输入正确的手机号");
                        return false;
                    }
                        break;
                    case name+"Url": if (isUrl(t[i].value)==false) {
                        t[i].focus();
                        t[i].select();
                        alert("请输入正确的url地址");
                        return false;
                    }
                default:
                }
            }
        }
    }

         这个验证只需要传一个text的name属性的公共部分“xx“，然后按照xx+type的格式给text的name属性赋值即可。例如我想要验证一个文 本框是否是英文，text的name 属性为txtEnglish ,然后只要给js传一个txt，就可以自动完成验证（维修网）。

         代码就是一个越写越多，然后越写越少，越写越精的过程，反复，抽象，让代码更美。

         文章来源： style="color:#000000;">。

* 常用表单验证封装
 * BY bruce 2013-05-27
 */
var shapebase=new ShapeBase();
function ShapeBase()
{
    //formobj = document.getElementsByName(frmname);
    /**
     * 非空校验
     */
    ShapeBase.notEmpty=function(obj,strNote)
    {
        var tempValue=ShapeBase.trim(obj.value);
        if(tempValue=="")
        {
            alert("【"+strNote+"】不能为空！");
            return false;
        }
        return true;
    }
    /**
     * 验证数字
     * @param minLen:最小长度,不校验传0;maxLen:最大长度,不校验传0
     */
    ShapeBase.isDigit=function(obj,minLen,maxLen,strNote)
    {
        var patrn=/^\d|([1-9][0-9]{1,})$/;
        if (!patrn.exec(obj.value))
        {
            alert("【"+strNote+"】必须由数字组成!");
            return false;
        }
        //长度验证
        return ShapeBase.lengthLimit(obj, minLen, maxLen,strNote);
        return true;
    }
    /**
     * 校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
     */
    ShapeBase.checkUserName=function(obj)
    {
        var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
        if (!patrn.exec(obj.value))
        {
            alert("登录名不合法！登录名只能由5-20个字母、数字、下划线组成，并以字母开头！");
            return false ;
        }
        return true ;
    }
    /**
     * 校验密码：只能输入6-20个字母、数字、下划线
     */
    ShapeBase.checkPwd=function(obj)
    {
        var patrn=/^(\w){6,20}$/;
        if (!patrn.exec(obj.value))
        {
            alert("密码格式不合法！只能输入字母、数字、下划线！");
            return false;
        }
        return true ;
    }
    /**
     * 校验密码：两次密码是否一致
     */
    ShapeBase.checkRepeatPwd=function(obj1,obj2)
    {
        if (obj1.value!=obj2.value)
        {
            alert("密码不一致！请重新输入");
            obj1.value="";
            obj2.value="";
            return false;
        }
        return true ;
    }
    /**
     * 校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”
     * @param canImpty:1,可空;0,必填
     */
    ShapeBase.checkTel=function(obj,canImpty)
    {
        if(canImpty==1)
        {
            if(obj.value=="")
            {
                return true;
            }
        }
        var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
        if (!patrn.exec(obj.value))
        {
            alert("电话/传真号码格式不正确！");
            return false ;
        }
        return true ;
    }
    /**
     * 验证手机号
     * @param canImpty:1,可空;0,必填
     */
    ShapeBase.checkMobile=function(obj,canImpty)
    {
        if(canImpty==1)
        {
            if(obj.value=="")
            {
                return true;
            }
        }
        if (!(/^1[\d]{10}$/g.test(obj.value))) {
            alert("手机号码格式不正确，请确认！");
            return false;
        }
    }
    /**
     * 只能是汉字
     */
    ShapeBase.isChinese=function(obj,strNote)
    {
        var reg = /^[\u4e00-\u9fa5]+$/gi;
        if(!reg.test(obj.value))
        {
            alert("【"+strNote+"】必须为汉字!");
            //obj.select();
            return false;
        }
        return true;
    }
    /**
     * 长度限制
     * @param obj:对象,minLen:最小长度,maxLen:最大长度
     */
    ShapeBase.lengthLimit=function(obj,minLen,maxLen,strNote)
    {
        if(minLen>0&&maxLen>0)
        {
            if(obj.value.length<minLen||obj.value.length>maxLen)
            {
                alert("【"+strNote+"】长度必须是"+minLen+"至"+maxLen+"个字符!");
            }
        }
        else if(maxLen>0)
        {
            if(obj.value.length>maxLen)
            {
                alert("【"+strNote+"】不能超过"+maxLen+"个字符！");
                //obj.select();
                return false;
            }
        }
        else if(minLen>0)
        {
            if(obj.value.length<minLen)
            {
                alert("【"+strNote+"】不能少于"+minLen+"个字符！");
                //obj.select();
                return false;
            }
        }
        return true;
    }
    /**
     * 验证邮箱格式
     * @param canImpty:1,可空;0,必填
     */
    ShapeBase.isEmail=function(obj,canImpty) {
        if(canImpty==1)
        {
            if(obj.value=="")
            {
                return true;
            }
        }
        if (obj.value.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
        {
            return true;
        }
        else
        {
            alert("邮箱格式不正确!");
            //obj.select();
            return false;
        }
    }
    /**
     * 身份证15位编码规则：dddddd yymmdd xx p
     * dddddd：地区码
     * yymmdd: 出生年月日
     * xx: 顺序类编码，无法确定
     * p: 性别，奇数为男，偶数为女
     * <p />
     * 身份证18位编码规则：dddddd yyyymmdd xxx y
     * dddddd：地区码
     * yyyymmdd: 出生年月日
     * xxx:顺序类编码，无法确定，奇数为男，偶数为女
     * y: 校验码，该位数值可通过前17位计算获得
     * <p />
     * 18位号码加权因子为(从右到左) Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,1 ]
     * 验证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
     * 校验位计算公式：Y_P = mod( ∑(Ai×Wi),11 )
     * i为身份证号码从右往左数的 2...18 位; Y_P为脚丫校验码所在校验码数组位置
     *
     * @param canImpty:1,可空;0,必填
     */
    ShapeBase.checkIdCard = function(obj,canImpty) {
        idCard = ShapeBase.trim(obj.value.replace(/ /g, ""));
        if(canImpty==1)
        {
            if(obj.value=="")
            {
                return true;
            }
        }
        if (idCard.length == 15)
        {
            return ShapeBase.isValidityBrithBy15IdCard(idCard);
        }
        else if (idCard.length == 18)
        {
            var a_idCard = idCard.split("");// 得到身份证数组
            if(ShapeBase.isValidityBrithBy18IdCard(idCard)&&ShapeBase.isTrueValidateCodeBy18IdCard(a_idCard))
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        else
        {
            alert("身份证号长度必须是15位或18位！");
            return false;
        }
    }
    /**
     * 判断身份证号码为18位时最后的验证位是否正确
     * @param a_idCard 身份证号码数组
     * @return
     */
    ShapeBase.isTrueValidateCodeBy18IdCard=function(a_idCard)
    {
        var sum = 0; // 声明加权求和变量
        var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ];// 加权因子
        var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ];// 身份证验证位值.10代表X
        if (a_idCard[17].toLowerCase() == 'x')
        {
            a_idCard[17] = 10;// 将最后位为x的验证码替换为10方便后续操作
        }
        for ( var i = 0; i < 17; i++)
        {
            sum += Wi[i] * a_idCard[i];// 加权求和
        }
        valCodePosition = sum % 11;// 得到验证码所位置
        if (a_idCard[17] == ValideCode[valCodePosition])
        {
            return true;
        }
        else
        {
            alert("身份证号码格式不正确！请确认");
            return false;
        }
    }
     /**
      * 验证18位数身份证号码中的生日是否是有效生日
      * @param idCard 18位书身份证字符串
      * @return
      */
    ShapeBase.isValidityBrithBy18IdCard=function(idCard18)
    {
        var year =  idCard18.substring(6,10);
        var month = idCard18.substring(10,12);
        var day = idCard18.substring(12,14);
        var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
        // 这里用getFullYear()获取年份，避免千年虫问题
        if(temp_date.getFullYear()!=parseFloat(year)||temp_date.getMonth()!=parseFloat(month)-1||temp_date.getDate()!=parseFloat(day))
        {
            alert("身份证号格式不正确！出生日期有误!");
            return false;
        }
        else
        {
            return true;
        }
    }
    /**
     * 验证15位数身份证号码中的生日是否是有效生日
     * @param idCard15 15位书身份证字符串
     * @return
     */
    ShapeBase.isValidityBrithBy15IdCard=function(idCard15)
    {
        var year =  idCard15.substring(6,8);
        var month = idCard15.substring(8,10);
        var day = idCard15.substring(10,12);
        var temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
        // 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
        if(temp_date.getYear()!=parseFloat(year)||temp_date.getMonth()!=parseFloat(month)-1||temp_date.getDate()!=parseFloat(day))
        {
            alert("身份证号格式不正确！出生日期有误!");
            return false;
        }
        else
        {
            return true;
        }
    }
    /**
     * 通过身份证判断是男是女
     * @param idCard 15/18位身份证号码
     * @return 'female'-女、'male'-男
     */
    ShapeBase.getSexByIdCard=function(idCard)
    {
        idCard = ShapeBase.trim(idCard.replace(/ /g, ""));// 对身份证号码做处理。包括字符间有空格。
        if(idCard.length==15)
        {
            if(idCard.substring(14,15)%2==0)
            {
                return 'female';
            }
            else
            {
                return 'male';
            }
        }
        else if(idCard.length ==18)
        {
            if(idCard.substring(14,17)%2==0)
            {
                return 'female';
            }
            else
            {
                return 'male';
            }
        }
        else
        {
            return null;
        }
    }
    /**
     * 通过身份证获取出生日期
     * @param idCard 15/18位身份证号码
     * @return tempStr:出生日期
     */
    ShapeBase.getBirthdayByIdCard=function(idCard) {
        var tmpStr = "";
        var idDate = "";
        var tmpInt = 0;
        var strReturn = "";

        idCard = ShapeBase.trim(idCard);
        if (idCard.length == 15)
        {
            tmpStr = idCard.substring(6, 12);
            tmpStr = "19" + tmpStr;
            tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        }
        else
        {
            tmpStr = idCard.substring(6, 14);
            tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        }
        return tmpStr;
    }
    /**
     * 日期验证
     * @param :obj,日期对象,值格式:YYYY-mm-dd
     */
    ShapeBase.checkDate=function(obj)
    {
        var strDate = obj.value;
        var result = strDate.match(/((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/);
        if(result==null)
        {
            alert("请输入正确的日期格式！,例如：2009-01-01。\r\n 或从时间列表中选择日期。");
            return false;
        }
        return true;
    }
    /**
     * 月份验证
     * @param :obj,月份对象,格式:YYYY-mm
     */
    ShapeBase.checkMon=function(obj)
    {
        var strDate = obj.value;
        var result = strDate.match(/^(19|20)\d{2}-((0[1-9])|(1[0-2]))$/);
        if(result==null)
        {
            alert("请输入正确的日期格式！如：2013-05");
            return false;
        }
        return true;
    }
    /**
     * 字符串处理
     * 去掉首尾空格
     */
    ShapeBase.trim=function(str)
    {
        return str.replace(/(^\s*)|(\s*$)/g, "");
    }
    /**
     * 重置表单
     * @para formseq:表单序号
     */
    ShapeBase.resetForm=function(formSeq)
    {
        var obj = null;
        for (var i = 0; i <= document.forms[0].elements.length - 1; i++)
        {
            obj = frm1.elements[i];
            if (obj.tagName == "INPUT" && obj.type == "text")
            {
                obj.setAttribute("value", "");
            }
            if (obj.tagName == "INPUT" && obj.type == "checkbox")
            {
                obj.setAttribute("checked", false);
            }
            if (obj.tagName == "SELECT")
            {
                obj.options[0].selected = true;
            }
        }
        return false;
    }
}