zoukankan      html  css  js  c++  java
  • asp.net实现类似MaskTextBox功能

    最近项目中遇到一个文号格式验证问题,需要按照已定义的文号格式,输入内容,然后验证特定部分是否合法的功能。技术难度不是很大,关键是该文号格式可以自定义,这样就会造成待验证的特定部分是不定的,用正则表达式也很难匹配。比如文号格式:国教委[$YYYY$]年$MM$月第$0$号文件,其中$YYYY$表示四位年,$MM$表示两位月,$0$表示文件编号。如果格式变为国教委$YYYY$年$0$号或其他格式,正则很难匹配特定位置是否为正确的格式,最重要的是要获取到$0$表示的文件编号,如果是这样的格式:国教委$YYYY$$MM$$0$,同样都是数字,无法区分哪个是编号。于是考虑用正则表达式分析文号格式,然后动态生成各部分的文本框,给每个特定验证的部分以特定ID,在提交输入内容的时候将动态生成的文本框内容拼合起来,再获取特定验证部分的内容,这样就可以实现自定义格式的验证了。由于要动态生成和删除html元素,以及获取指定name和id的文本框内容,所以用jquery库会大大提高编程速度。

    一、正则表达式分析文号格式

    文号格式中的特定部分由$$分割,我们依次作为正则匹配的分界点,可以将文号格式拆分成固定和可变的部分,然后依次来动态生成文本框。

    正则表达式:

    1:  var regPa = new RegExp("\\$(.*?)\\$","g");

    匹配字符串:

    1:  pattArr = regPa.exec(fileNumformat)

     

    二、动态生成文本框

     1:        var regPa = new RegExp("\\$(.*?)\\$","g");
     2:        var pattArr;
     3:        var iIndex=0;  // 正则匹配项位置
     4:        var iCount=0;  // 正则匹配个数
     5:        var strSplit="<span  name='lbl_fileNum' id='span_fileNum_blank'>&nbsp;&nbsp;</span>";  // 分割文本框的字符
     6:        while((pattArr = regPa.exec(fileNumformat))!=null)
     7:        {     
     8:          var textBoxStr="";  // 控件字符串
     9:          if(iIndex!=pattArr.index)
    10:          {
    11:            textBoxStr="<input name='txt_fileNum' id='txt_fileNum_"+(++iCount)+"' value='"+fileNumformat.substring(iIndex,pattArr.index)+"' type='text' style='80px'/>"+strSplit;
    12:          }
    13:          iCount++;
    14:          if(pattArr[1]=="0")  // 流水号
    15:          {
    16:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_num"+"' value='' type='text' style='40px'/>"+strSplit;              
    17:          }
    18:          else
    19:          {
    20:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_'"+iCount+"' value='' type='text'  style='40px'/>"+strSplit;             
    21:          }
    22:          $("#span_must").before(textBoxStr);
    23:          iIndex=pattArr.index+pattArr[0].length;
    24:        }
    25:        if(iIndex<fileNumformat.length)
    26:        {
    27:          $("#span_must").before("<input name='txt_fileNum' id='txt_fileNum_'"+(++iCount)+"' value='"+fileNumformat.substring(iIndex)+"' type='text' style='80px'/>"+strSplit)
    28:        }

    上面的代码考虑了$$在最开始、最末位、两个$$紧挨的情况,可以正确分割文号格式中的各个部分。特别处理的部分就是如果当前特定格式是$0$即编号,就给他一个特定的id,以便于后边jquery获取编号。

    三、获取填写后的文号和特定编号

    1:        var str="";
    2:        var currNum="";
    3:        $("[name='txt_fileNum']").each(function(){
    4:          str+=$(this).val();
    5:        });
    6:        alert("文号:"+str+"的编号是:"+$("#txt_fileNum_num").val());

     

    四、清除动态生成的html标签

    如果会多次匹配文号,即文号格式可动态选择,那么就需要将原来动态生成的html元素清除,然后再次分析、生成。

    1:        // 清除原来元素
    2:        $("[name='txt_fileNum'],[name='lbl_fileNum']").remove();

     

    五、效果

    QQ截图未命名

    六、全部源码

     1:      function SetFileNumTextBox(fileNumformat)
     2:      {   
     3:        // 清除原来元素
     4:        $("[name='txt_fileNum'],[name='lbl_fileNum']").remove();
     5:  
     6:        if (fileNumformat == "" || fileNumformat == undefined)
     7:        {
     8:          $("#span_must").before("<span  name='lbl_fileNum' id='span_fileNum_alert' style='color: #FF0000'>文号格式缺失</span>");
     9:          return;
    10:        }
    11:        
    12:        var regPa = new RegExp("\\$(.*?)\\$","g");
    13:        var pattArr;
    14:        var iIndex=0;  // 正则匹配项位置
    15:        var iCount=0;  // 正则匹配个数
    16:        var strSplit="<span  name='lbl_fileNum' id='span_fileNum_blank'>&nbsp;&nbsp;</span>";  // 分割文本框的字符
    17:        while((pattArr = regPa.exec(fileNumformat))!=null)
    18:        {     
    19:          var textBoxStr="";  // 控件字符串
    20:          if(iIndex!=pattArr.index)
    21:          {
    22:            textBoxStr="<input name='txt_fileNum' id='txt_fileNum_"+(++iCount)+"' value='"+fileNumformat.substring(iIndex,pattArr.index)+"' type='text' style='80px'/>"+strSplit;
    23:          }
    24:          iCount++;
    25:          if(pattArr[1]=="0")  // 流水号
    26:          {
    27:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_num"+"' value='' type='text' style='40px'/>"+strSplit;              
    28:          }
    29:          else
    30:          {
    31:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_'"+iCount+"' value='' type='text'  style='40px'/>"+strSplit;             
    32:          }
    33:          $("#span_must").before(textBoxStr);
    34:          iIndex=pattArr.index+pattArr[0].length;
    35:        }
    36:        if(iIndex<fileNumformat.length)
    37:        {
    38:          $("#span_must").before("<input name='txt_fileNum' id='txt_fileNum_'"+(++iCount)+"' value='"+fileNumformat.substring(iIndex)+"' type='text' style='80px'/>"+strSplit)
    39:        }
    40:        $("#span_must").before("<span name='lbl_fileNum' id='span_fileNum_help' style='color: #FF0000'>"+fileNumformat+"</span>");
    41:        document.getElementById(<%="\""+hid_currNum.ClientID+"\"" %>).value=iCount;
    42:      }

    传入参数是文号格式,span_must就是效果图中的“*”,作为一个插入html元素的标志位置。

    七、兼容性

    已解决由于RegExp的lastIndex属性在Firefox和Chrome中不存在而导致截取字符串内容出错的问题,由匹配字符串长度加index来替换lastIndex的计算,经测试,IE、Firefox和Chrome都无问题。

    祝大家好运!

  • 相关阅读:
    用图片来代替字符串
    下载网页时的 有gzip压缩的处理
    位置不固定验证码的识别
    CookieContainer 与 Session
    Thread Pool 备忘
    用 SGMLReader把子HTML 转 XML
    非asp.net控件实现回发 button
    ajax.net ??= 回车
    如何写需求分析
    jsp中地址
  • 原文地址:https://www.cnblogs.com/tristinjet/p/1760049.html
Copyright © 2011-2022 走看看