博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js简单的表单验证
阅读量:5734 次
发布时间:2019-06-18

本文共 12476 字,大约阅读时间需要 41 分钟。

hot3.png

/**

 * 定义校验的正则表达式
 * 注意:每个正则表达式必须要设置一个对应的错误提示信息.
 * 例如:
 *      fcPatternsDict.Str        = /^[a-z]+$/;
 *      fcPatternsDict.str_ERR    = "正确格式:只能输入a-z的26个英文字母";
 * 设置时候在属性名后面加"_ERR"表示相应的错误提示信息.
 */
var fcPatternsDict    = new Object();   //定义正则表达式对象

/* 开始定义正则表达式 */

//定义说明:
//只有在日期型校验的时候,可以使用DATE字符,
//其余不允许使用DATE字符
fcPatternsDict.D3                 = /(^(\d{1}|\d{2}|\d{3})$)/;
fcPatternsDict.D3_ERR               = "格式为DDD.";
fcPatternsDict.D3_D3             = /(^(\d{1}|\d{2}|\d{3})\.(\d{1}|\d{2}|\d{3})$)|(^(\d{1}|\d{2}|\d{3})$)/;
fcPatternsDict.D3_D3_ERR            = "格式为DDD.DDD,最多3位整数、3位小数."; 
fcPatternsDict.A              = /^[A-Za-z0-9_]+$/;
fcPatternsDict.A_ERR            = "必须为A-Z(或者a-z)、0-9、_(下划线)这3种字符!";
fcPatternsDict.UpperAlpha         = /^[A-Z]$/;
fcPatternsDict.UpperAlpha_ERR     = "Formater:letter(A-Z).";
fcPatternsDict.PInt                 = /^([0]{1}|[1-9]\d*)$/;
fcPatternsDict.PInt_ERR             = "Formater:integer(>=0)."; 
fcPatternsDict.PInt1                = /^([1-9]\d*)$/;
fcPatternsDict.PInt1_ERR            = "Formater:integer(>0)."; 
fcPatternsDict.Digit             = /^[0-9]+$/;
fcPatternsDict.Digit_ERR         = "Formater:figure(0-9)."; 
fcPatternsDict.MB              = /^[0-9]+$/;//mobile phone number 
fcPatternsDict.MB_ERR          = "只能输入0-9的数字.";
fcPatternsDict.ICBC              = /^(\d{16}|\d{19})$/;//工商银行卡号必须为16位或19位数字.
fcPatternsDict.ICBC_ERR          = "工商银行卡号必须为16位或19位数字.";
fcPatternsDict.Email             = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//email
fcPatternsDict.Email_ERR         = "电子邮件地址格式不正确.";
fcPatternsDict.DATE           = /^[1-9]+$/;//日期正则表达式,实际校验通过下面的fcCheckDATE()函数进行.
fcPatternsDict.DATE_ERR          = "正确格式为:";//日期校验的错误提示信息,结合在实际表单中设置的dateformat元素共同显示. 
/* 结束定义正则表达式 */

/**

 * 获取字符串的字节长度
 * @param str 字符串
 * @return 字符串的字节长度
 * @version 1.0.2005.0325
 */
function fcGetBytesLen(str)
{
    if(str == null) return 0;
    var theValue = str.toString();
    /* 如果为非utf编码,则使用如下判断方式
    var nBytes = 0;
    for(i=0; i<theValue.length; i++)
    {
        if(theValue.charCodeAt(i) >= 0x1000)
        {
            nBytes++;
        }
        nBytes++;
    }
   
    return nBytes;
    */
    return theValue.length;//如果使用utf编码,则直接返回字符长度。
}

 

/**

 * 判断是否是合法的日期格式-fcPatternsDict.DATE
 * 函数名必须与[fcPatternsDict.DATE]中的[DATE]对应起来
 * 函数名=[fcPatternsDict.DATE]中的[DATE]前加上字符fcCheck,即fcCheckDATE()
 * @param dateValue 日期字符串
 * @param dateFormat 日期格式字符串
 * @return true=合法,false=非法
 * @version 1.0.2005.0325
 * 支持的日期格式有
 * YYYY-MM-DD
 * YYYY:MM:DD
 * YYYY/MM/DD
 * YYYY.MM.DD
 * YYYYMMDD
 * YYYY^YYYYMM^YYYYMMDD
 */
function fcCheckDATE(dateValue,dateFormat)
{
    //如果 dateValue 或者 dateFormat 为null,则返回false.
    if((dateValue == null) || (dateFormat == null))
    {
        return false;
    }
   
    //定义需要的变量
    var splitStrYM,splitStrMD,nianIndex,nianStr,yueIndex,yueStr,dayStr,
   
    //根据 dateFormat 进行校验
    dateValue = dateValue.toString();
    switch(dateFormat)
    {
        case "YYYY-MM-DD":
        case "YYYY:MM:DD":
        case "YYYY/MM/DD":
        case "YYYY.MM.DD":
            if(dateFormat=="YYYY-MM-DD"){
                splitStrYM = "-";//年月之间的分隔符号
                splitStrMD = "-";//月日之间的分隔符号
            }
            if(dateFormat=="YYYY:MM:DD"){
                splitStrYM = ":";//年月之间的分隔符号
                splitStrMD = ":";//月日之间的分隔符号
            }
            if(dateFormat=="YYYY/MM/DD"){
                splitStrYM = "/";//年月之间的分隔符号
                splitStrMD = "/";//月日之间的分隔符号
            }
            if(dateFormat=="YYYY.MM.DD"){
                splitStrYM = ".";//年月之间的分隔符号
                splitStrMD = ".";//月日之间的分隔符号
            }                                   

            if((dateValue.indexOf(splitStrYM)==-1) || (dateValue.indexOf(splitStrMD)==-1))

            {
                return false;
            }           
            nianIndex=dateValue.indexOf(splitStrYM);
            nianStr=dateValue.substring(0,nianIndex);
            if(nianStr.length!=4 || isNaN(nianStr)){return false;}
       
            yueIndex=dateValue.indexOf(splitStrMD,nianIndex+1);
            yueStr=dateValue.substring(nianIndex+1,yueIndex);
            if((yueStr.length!=1 && yueStr.length!=2) || isNaN(yueStr)){return false;}
       
            dayStr=dateValue.substring(yueIndex+1,dateValue.length);
            if((dayStr.length!=1 && dayStr.length!=2) || isNaN(dayStr)){return false;}
            return fcCheckDateValue(nianStr,yueStr,dayStr);
            break;           
       
        case "YYYYMMDD":
            if(dateValue.length!=8) {return false;}
            nianStr=dateValue.substring(0,4);
            yueStr=dateValue.substring(4,6);
            dayStr=dateValue.substring(6,8);
            if( isNaN(nianStr) || isNaN(yueStr) || isNaN(dayStr)){return false;}
            return fcCheckDateValue(nianStr,yueStr,dayStr);
            break;
           
        case "YYYY^YYYYMM^YYYYMMDD":
            if(!(dateValue.length==8 || dateValue.length==6 || dateValue.length==4)) {return false;}
            //为方便校验设置默认日期
            nianStr="2005";
            yueStr="10";
            dayStr="10";
            nianStr=dateValue.substring(0,4);
            if(dateValue.length==8 || dateValue.length==6){
                yueStr=dateValue.substring(4,6);
            }
            if(dateValue.length==8 ){
                dayStr=dateValue.substring(6,8);
            }
            if( isNaN(nianStr) || isNaN(yueStr) || isNaN(dayStr)){return false;}
            return fcCheckDateValue(nianStr,yueStr,dayStr);
            break;
           
        default://没有默认值,必须设置符合的dateFormat才能通过校验
            return false;
            break;
    }
   
}
/**
 * 判断是否是合法的日期格式
 * @param nianStr 年
 * @param yueStr 月
 * @param dayStr 日
 * @return true=合法,false=非法
 * @version 1.0.2005.0325
 * 合法的日期中年份必须是4位,月份可以是1位或者2位,日可以是1位或者2位.
 */
function fcCheckDateValue(nianStr,yueStr,dayStr)
{
    var tian=new Array();
    var nian=nianStr*1;
    var yue=yueStr*1;
    var day=dayStr*1;

    if(nian % 100==0)

    {
        if(nian % 400==0){
            tian[2]=29;
            niantag="闰年";
        }else{
            tian[2]=28;
            niantag="平年";
        }
    }else{
        if(nian % 4==0){
            tian[2]=29;
            niantag="闰年";
        }else{
            tian[2]=28;
            niantag="平年";
        }
    }
    tian[1]=31;
    tian[3]=31;
    tian[4]=30;
    tian[5]=31;
    tian[6]=30;
    tian[7]=31;
    tian[8]=31;
    tian[9]=30;
    tian[10]=31;
    tian[11]=30;
    tian[12]=31;
    if(nian<1){return false;}
    if(yue>12 || yue<1){return false;}
    if(day>tian[yue] || day<1){return false;}
    return true;
}

/**

 * 校验Form表单中的 information 属性是否存在
 * @param informationValue 待校验的表单的 informationValue 属性值
 * @param frmObjct 待校验的表单的元素
 * @return true=通过校验,false=没有通过校验
 * @version 1.0.2005.0325
 */
function fcCheckInformationAttr(informationValue,frmObjct,frmObjectType){
    if(informationValue==null){//必须要有information属性
        fcShowCheckErrInfo(frmObjct,frmObjectType,"There have element(s) which information property not defined.","element(s) which information property not defined.");
        return false;
    }//if(informationValue==null)
    return true;  
}

/**

 * 校验Form表单中发生错误的提示方法
 * @param frmObjct 待校验的表单的元素
 * @param frmObjectType 待校验的表单元素的类型
 * @param alertInfo 显示的错误提示信息
 * @param titleInfo 表单元素的鼠标提示信息
 * @return void
 * @version 1.0.2005.0325
 */
function fcShowCheckErrInfo(frmObjct,frmObjectType,alertInfo,titleInfo){
   
    alert(alertInfo);//显示校验失败的提示信息
    frmObjct.focus();//将焦点设置到校验失败的元素上
   
    if(frmObjectType=="TEXTAREA" || frmObjectType=="INPUT"){
        frmObjct.title=titleInfo;//设置校验失败元素的title属性
        frmObjct.select();//选中校验失败的元素对应的值
    }
   
    if(frmObjectType=="SELECT"){
        //do nothing
        //说明:SELECT的FORM控件不支持select()方法和title属性.
    }
}

/**

 * 校验Form表单
 * @param formObject 待校验的表单对象
 * @return true=通过校验,false=没有通过校验
 * @version 1.0.2005.0325
 * Form表单中元素新增的属性如下:
 * @attribute validator     [可选]元素使用的正则表达式名.
 * @attribute information   [可选]如果表单定义了 validator,must,minbytes,maxbytes,dateformat属性,则必须定义information属性。 元素的中文(或英文等)名称,在显示错误提示时候使用.
 * @attribute must          [可选]元素是否必填.must=true表示必填;没有本属性或者must不为true,则表示不是必填项.
 * @attribute minbytes      [可选]元素可以输入的最小字节长度,1个汉字=2个字节.
 * @attribute maxbytes      [可选]元素可以输入的最大字节长度,1个汉字=2个字节.
 * @attribute dateformat    [可选]配合日期型的校验.如果选择fcPatternsDict.DATE的正则表达式,则必须设置本属性.
 *
 * 备注:
 * 目前只检查表单中的以下元素:
 * <1>.INPUT的text元素
 * <2>.INPUT的password元素
 * <3>.TEXTAREA元素
 * <4>.SELECT元素
 */
function fcValidateForm(formObject)
{
    var len;
    var elArr = formObject.elements;//将表单中的所有元素放入数组
   
    //对于表单中的每一个元素Form属性进行校验
    for(var i = 0; i < elArr.length; i++){
        if(elArr[i].tagName=="TEXTAREA" || (elArr[i].tagName=="INPUT" && (elArr[i].type=="text" || elArr[i].type=="password"))){
            var elementValue=elArr[i].value;
        }else if(elArr[i].tagName=="SELECT"){  
            var elementValue=elArr[i].options[elArr[i].selectedIndex].value; 
        }else{
            continue;
        }

        //获取 information 属性

        var informationValue = elArr[i].getAttribute("information");

        /*

         * 根据 must 属性进行输入内容长度的校验
         */
        var elementMust=elArr[i].getAttribute("must");
        if(elementMust!=null && elementMust=="true"){
            if(false==fcCheckInformationAttr(informationValue,elArr[i])){//必须要有information属性
                return false;
            }
            if(elementValue!=null && elementValue==""){
                fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "错误:" + "不能为空。","不能为空。");             
                return false;
            }//if(elementValue!=null && elementValue=="") 
        }//if(elementMust!=null && elementMust=="true")
       
        /*
         * 根据 minbytes 属性进行输入内容长度的校验
         */
        var elementMinBytes=elArr[i].getAttribute("minbytes");//获取minbytes属性
        if(elementMinBytes!=null)
        {
            if(false==fcCheckInformationAttr(informationValue,elArr[i])){//必须要有information属性
                return false;
            }
                       
            if(!isNaN(elementMinBytes))
            {   
                len=elementMinBytes*1;
                if(fcGetBytesLen(elementValue)<len)
                {
                    fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "错误:" + "最小长度为"+len+"个字符。","最小长度为"+len+"个字符。");             
                    return false;
                }
            }else{
                fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "Set min length bytes error:current value is " + elementMinBytes + ", must be a integer more than 0.","Set min length bytes error:must be a integer more than 0.");
                return false;
            }//if(!isNaN(elementMinBytes))
        }//if(elementMinBytes!=null)         
       
        /*
         * 根据 maxbytes 属性进行输入内容长度的校验
         */
        var elementMaxBytes=elArr[i].getAttribute("maxbytes");//获取maxbytes属性
        if(elementMaxBytes!=null)
        {
            if(false==fcCheckInformationAttr(informationValue,elArr[i])){//必须要有information属性
                return false;
            }
                  
            if(!isNaN(elementMaxBytes))
            {   
                len=elementMaxBytes*1;
                if(fcGetBytesLen(elementValue)>len)
                {           
                    fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "错误:" + "最大长度为"+len+"个字符。","最大长度为"+len+"个字符。");
                    return false;
                }
            }else{
                fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "Set max length bytes error:current value is " + elementMaxBytes + ",must be a integer which more than 0.","Set max length error:must be integer which more than 0.");
                return false;
            }//if(!isNaN(elementMaxBytes)
        }//if(elementMaxBytes!=null)       
       
        /*
         * 根据 validator 属性进行正则表达式的校验
         */
        var patternValue = null;
        var validatorValue = elArr[i].getAttribute("validator");//获取其validator属性
        if(validatorValue!=null){
            patternValue = fcPatternsDict[validatorValue];//获取校验使用的正则表达式
            if(false==fcCheckInformationAttr(informationValue,elArr[i])){//必须要有information属性
                return false;
            }
        }else{
            continue;
        }//if(validatorValue!=null)
        if(patternValue==null) {//如果找不到对应的正则表达式
            fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + informationValue + "Set validator property error:can not find the validator property " + validatorValue + " .","Set validator property error:can not find the validator property " + validatorValue + " .");
            return false;
        }//if(patternValue==null)
       
        //对已经有输入值的form元素进行正则表达式校验
        if(elementValue!=null && elementValue.length>0){
           
            //正则表达式为日期型校验,则直接调用对应的函数进行校验
            if(validatorValue == "DATE"){
                var retDateCheck = false;
                var elementDateFormat = elArr[i].getAttribute("dateformat");//获取其dateformat属性
                if(elementDateFormat==null) {//如果找不到dateformat属性
                    fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "Set validator property error:can not find the dateformat property.","Set validator property error:can not find the dateformat property.");
                    return false;
                }//if(validatorValue == "DATE")
       
                eval("retDateCheck = fcCheck" + validatorValue + "(\"" + elementValue + "\",\"" + elementDateFormat + "\")");
                if(!retDateCheck){
                    fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "错误:" + fcPatternsDict[validatorValue+"_ERR"]  + elementDateFormat + " .",fcPatternsDict[validatorValue+"_ERR"] + elementDateFormat + " .");
                    return false;
                }//if(!retDateCheck)
                continue;
            }//if(validatorValue.indexOf("DATE")!=-1)
           
            //根据正则表达式进行校验
            var patternResult = patternValue.exec(elementValue);//用正则表达式验证elArr[i]的值
            if(!patternResult)
            {//根据正则表达式的校验返回值处理 
                fcShowCheckErrInfo(elArr[i],elArr[i].tagName,informationValue + "错误:" + fcPatternsDict[validatorValue+"_ERR"],fcPatternsDict[validatorValue+"_ERR"]);
                return false;
            }//if(!patternResult)
        }//if(elementValue!=null && elementValue.length>0)
    }//for(var i = 0; i < elArr.length; i++)

   

    return true;
}//end fcValidateForm()

/**
 * 对表单元素的非法字符进行校验
 * @param formObject 待校验的表单对象
 * @param invalidChar 非法的字符
 * @return true=成功,false=失败
 * @version 1.0.2005.0325
 *
 * 备注:
 * 目前只检查表单中的以下元素:
 * <1>.INPUT的text元素
 * <2>.INPUT的password元素
 * <3>.TEXTAREA元素
 */
function fcCheckFormInvalidChar(formObject,invalidChar)
{
    if(formObject==null) return true;
    if(invalidChar==null || invalidChar=="") return true;
    var len;
    var elArr = formObject.elements;//将表单中的所有元素放入数组
    //对于表单中的每一个元素进行非法字符值的校验校验
    for(var i = 0; i < elArr.length; i++){
        if( elArr[i].tagName=="TEXTAREA" ||
            (elArr[i].tagName=="INPUT" && (elArr[i].type=="text" || elArr[i].type=="password"))
          )
        {
            var elementValue=elArr[i].value;
            if(elementValue!=null && elementValue.length>0){
                if(-1!=elementValue.indexOf(invalidChar)){
                   
                    fcShowCheckErrInfo(elArr[i],elArr[i].tagName,"Error.Can not input [" + invalidChar + "]." ,"Can not input [" + invalidChar + "].");
                    return false;
                }
            }//if(elementValue!=null && elementValue.length>0)
        }else{
            continue;
        }       
    }//for(var i = 0; i < elArr.length; i++)
    return true;
}

原文链接:

转载于:https://my.oschina.net/moroseyu/blog/51388

你可能感兴趣的文章
SecurityMatrix 上天猫的小伙伴有遇到这种情况的没?
查看>>
JavaScript-1.最简单的程序之网页弹出对话框,显示为Warning---ShinePans
查看>>
如何看数据库是否处在force_logging模式下
查看>>
从IT到DT,最大的差异是思想上的,成功者必须是利他思想
查看>>
java 中的 socket 编程详细介绍
查看>>
Orchard之创建列表
查看>>
spring整合mybatis是如何配置事务的?
查看>>
java.lang.NumberFormatException: For input string: &quot;undefined&quot;
查看>>
jQuery查找节点
查看>>
windows下 安装Kali Linux到 U盘的方法
查看>>
(转载)ios的一些知识点
查看>>
【译】Activitys, Threads和 内存泄露
查看>>
NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身,非常实用的功能...
查看>>
桶排序——PowerShell版
查看>>
【Android】用HandlerThread模拟AsyncTask功能(ThreadTask)
查看>>
52.8. UNION
查看>>
Educational Codeforces Round 21(A.暴力,B.前缀和,C.贪心)
查看>>
Mina2.0框架源码剖析(七)
查看>>
MIME类型
查看>>
第 3 章 Berkeley UNIX C shell (csh)
查看>>