asp. net 유사 MaskTextBox 기능 구현

최근 프로젝트 에서 문호 형식 검증 문제 가 발생 했 습 니 다. 정 의 된 문호 형식 에 따라 내용 을 입력 한 다음 특정 부분의 합 법 적 인 기능 을 검증 해 야 합 니 다.기술적 난이도 가 그리 크 지 않 습 니 다. 관건 은 이 번호 형식 을 사용자 정의 할 수 있다 는 것 입 니 다. 그러면 검증 해 야 할 특정한 부분 이 정 해 지지 않 고 정규 표현 식 으로 도 일치 하기 어렵 습 니 다.예 를 들 어 문호 형식: 국교 위 [$YYYY $] 년 $MM $월 제 $0 $호 파일, 그 중에서 $YYY $는 4 명의 해 를 표시 하고 $MM $는 두 개의 달 을 표시 하 며 $0 $는 파일 번 호 를 표시 합 니 다.만약 형식 이 국교 위 $YYY $년 $0 $호 또는 기타 형식 으로 바 뀌 었 다 면, 특정 위치 가 정확 한 형식 인지 아 닌 지 를 일치 시 키 기 어 려 울 것 입 니 다. 가장 중요 한 것 은 $0 $가 표시 하 는 파일 번 호 를 얻 는 것 입 니 다. 만약 이러한 형식 이 라면, 국교 위 $YYY $$MM $0 $, 같은 숫자 입 니 다. 어떤 것 이 번호 인지 구분 할 수 없습니다.따라서 정규 표현 식 으로 문호 형식 을 분석 한 다음 에 각 부분의 텍스트 상 자 를 동적 으로 생 성하 여 각 특정한 검 증 된 부분 에 특정 ID 를 주 고 입력 내용 을 제출 할 때 동적 으로 생 성 된 텍스트 상자 의 내용 을 합 친 다음 에 특정한 검 증 된 부분의 내용 을 가 져 오 면 사용자 정의 형식의 검증 을 실현 할 수 있 습 니 다.html 요 소 를 동적 으로 생 성하 고 삭제 하 며 지정 한 name 과 id 의 텍스트 상자 내용 을 가 져 오기 때문에 jquery 라 이브 러 리 를 사용 하면 프로 그래 밍 속 도 를 크게 높 일 수 있 습 니 다.
1. 정규 표현 식 분석 문호 형식
문호 형식의 특정 부분 은 $$로 나 뉘 어 있 습 니 다. 우 리 는 차례대로 정규 와 일치 하 는 경계 점 으로 문호 형식 을 고정 적 이 고 가 변 적 인 부분 으로 나 눈 다음 에 순서대로 텍스트 상 자 를 동적 으로 생 성 할 수 있 습 니 다.
정규 표현 식:

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

일치 하 는 문자열:

1:  pattArr = regPa.exec(fileNumformat)

 
2. 동적 생 성 텍스트 상자

 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='width: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='width:40px'/>"+strSplit;              

17:          }

18:          else

19:          {

20:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_'"+iCount+"' value='' type='text'  style='width: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='width:80px'/>"+strSplit)

28:        }

위의 코드 는 $$$가 처음, 마지막, 두 개의 $$가 붙 어 있 는 상황 을 고려 하여 번호 형식의 각 부분 을 정확하게 분할 할 수 있 습 니 다.특별 처리 부분 은 현재 특정 형식 이 $0 $즉 번호 라면 뒤쪽 jquery 에서 번 호 를 가 져 올 수 있 도록 특정한 id 를 주 는 것 입 니 다.
3. 작성 한 번호 와 특정 번 호 를 가 져 옵 니 다.

1:        var str="";

2:        var currNum="";

3:        $("[name='txt_fileNum']").each(function(){

4:          str+=$(this).val();

5:        });

6:        alert("  :"+str+"    :"+$("#txt_fileNum_num").val());

 
4. 동적 으로 생 성 된 html 라벨 제거
만약 에 여러 번 일치 하 는 문호, 즉 문호 형식 을 동적 으로 선택 할 수 있다 면 원래 동적 으로 생 성 된 html 요 소 를 제거 한 다음 에 다시 분석 하고 생 성 해 야 합 니 다.

1:        //       

2:        $("[name='txt_fileNum'],[name='lbl_fileNum']").remove();

 
효과
6. 모든 소스 코드

 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='width: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='width:40px'/>"+strSplit;              

28:          }

29:          else

30:          {

31:            textBoxStr+="<input name='txt_fileNum' id='txt_fileNum_'"+iCount+"' value='' type='text'  style='width: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='width: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:      }

입력 매개 변 수 는 문호 형식, spanmust 는 효과 그림 의 '*' 로 html 요 소 를 삽입 하 는 표지 위치 입 니 다.
호환성
RegExp 의 lastIndex 속성 이 Firefox 와 Chrome 에 존재 하지 않 기 때문에 문자열 내용 을 캡 처 하 는 데 오류 가 발생 하 는 문 제 를 해결 하 였 습 니 다. 일치 하 는 문자열 길이 에 index 를 추가 하여 lastIndex 의 계산 을 교체 합 니 다. 테스트 를 통 해 IE, Firefox, Chrome 은 문제 가 없습니다.
행운 을 빕 니 다!