Forms_javascript 기술을 탐지하기 위한 캡슐화된 범용 방법

양식이 비어 있을 수 없다는 유효성 검사 감지(.notnull)

기능: 제출해야 하는 한 쌍의 양식 태그 아래에 여러 개의(1개 포함) 양식이 있는 경우 js를 사용하여 현재 버튼과 해당 요소를 정확하게 판단합니다.

사용법: form 태그 아래에서 현재 양식의 컨테이너를 찾아 class="form"을 지정하고, 현재 양식의 제출 버튼에 class="check"를 지정합니다.
비어 있는지 확인해야 하는 요소에는 class="notnull" nullmsg="xx can beempt!" 프롬프트가 제공되고, 논리적 판단이 필요한 양식에는 class="need"
가 제공됩니다. 판단 유형은 class="num"(숫자만 가능)으로 지정됩니다. 확인 프롬프트 logicmsg="XX는 숫자만 가능합니다."

오류 메시지 블록을 표시하려면 class="errorMessage"를 지정하세요
오류 메시지를 표시하려면 class="warn"을 지정하세요
js 객체지향 프로그래밍을 사용하지 않음
논리적 판단, 필요 식별자를 전달하지 않고 정규식 속성(사용자 정의) regex="/^d$/"를 직접 제공하여 판단

외부 구현
Global.submitCallback 버튼 콜백 함수
Global.confirmCallback 콜백 확인 함수;
개선이 필요한 부분:
없음

코드 복사 코드는 다음과 같습니다.

/// <참조 경로="vendor/jquery-1.4.1-vsdoc.js" />
*/
//$(문서).ready(
// 함수 () {
//        $("form").find(".notnull").bind({
//            초점: 기능 () {
//                     if ($(this).attr("value") == this.defaultValue) {
//                       $(this).attr("value", "");
//               }
//            },
//            흐림: 함수 () {
//                    if ($(this).attr("value") == "") {
//                                                   $(this).attr("value", this.defaultValue);
//               }
//           }
//       });
// }
//);
///*범용 탐지 형식을 캡슐화하는 방법*/
///event.srcElement: 이벤트를 트리거하는 대상 객체로, onclick 이벤트에 자주 사용됩니다.
///event.fromElement: 이벤트를 트리거하는 객체 소스로, onmouseout 및 onmouseover 이벤트에 자주 사용됩니다.
///event.toElement: 이벤트가 발생한 후 마우스가 이동하는 대상 소스입니다. onmouseout 및 onmouseover 이벤트에 자주 사용됩니다.
함수 전역() {
var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(문서).ready(함수 () {
//몸체 만들기
$("body").find(".form").each(함수 () {
This.onclick = 함수(e) {
            var 버튼 = null;
             시도해 보세요 {
                         버튼 = e.srcElement == null ? document.activeElement : e.srcElement;
              } 잡기 (e) {
console.log(e.message)
                      버튼 = document.activeElement;
            }
If ($(button).is(".check")) {
//경고("제출")
                  var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
                      if (sub) {
// 콜백을 호출하지만 자체 인스턴스를 컨텍스트로 사용합니다
Global.submitCallback.call(this, [e]);
                }
                   하위 반환;
                } else if ($(button).is(".confirm")) {
//경고("삭제")
              var sub = verify($(button).attr("제목"));
                      if (sub) {
Global.confirmCallback.call(this, [e]);
                }
                    하위 반환;
              } else {
~ ~                    true를 반환합니다.
            }
}
});
/*양식에서 비워둘 수 없는 요소 감지*/
기능체크폼(form) {
        var b = true;
           $(form).find(".notnull").each(함수 () {
If ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue
// if (this.value! = Null) {
//                                                                                                                          ~ ~          // //alert($(this).attr("msg"))
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                     $(this).focus();
                   반환 b = false;
            }
        });
If (b == true) {
               $(form).find(".warn").text("");
                $(form).find(".errorMessage").hide();
}
         반환 b;
}
/*탐지 양식의 필수 드롭다운 목록*/
함수 checkselect(양식) {
        var b = true;
           $(form).find(".select").each(함수 (i) {
              var ck = $(this).find('option:selected').text();
If (ck.indexOf("select") > -1) {
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                    $(this).focus();
                   반환 b = false;
            }
        });
         반환 b;
}
/*탐지 양식에서 필수 체크박스를 선택하세요*/
함수 checkChecked(form) {
        var b = true;
​​​​ $(form).find(".checkbox").each(함수 (i) {
               var ck = $(this)[0].checked;
                if (!ck) {
                   $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
$(this).parents(".form").find(".errorMessage").show();
                     $(this).select();
                    $(this).focus();
                   반환 b = false;
            }
        });
         반환 b;
}
//정규식과 일치하는지 확인
함수 GetFlase(값, reg, ele) {
If (reg.test(값)) {
             true를 반환합니다.
}
           $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
​​​​ $(ele).parents(".form").find(".errorMessage").show();
          $(ele).focus();
          $(ele).select();
          false 반환 //제출할 수 없음
}
함수 CheckInputRex(form) {
        var b = true;
          $(form).find("input[type='text']").each(함수 () {
If (typeof ($(this).attr("regex")) == '문자열') {
If ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//현재 폼의 값
                     var value = $(this).attr("value") || $(this).val();
                  var regx = eval($(this).attr("regex"));
                         return b = GetFlase(value, regx, this);
                }
            }
        });
         반환 b;
}
///사용자가 입력한 해당 문자가 올바른지 확인
///이 방법은 더 이상 사용되지 않습니다
함수 CheckInput(양식) {
        var b = true;
$(form).find(".need").each(함수 () {
If ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//현재 폼의 값
              var value = $(this).attr("value");
                         //id 값 또는 name 속성 값은 다음과 같습니다: [name="contact"]
              var name = $(this).attr("class");
// 다음과 같이 입력해야 하는 콘텐츠가 합법적인지 확인하세요. 연락처 정보
              var len = name.split(" ");
for (var i = 0; i 스위치 ($.trim(len[i])) {
> >                                         케이스 "모바일":
~ ~     var reg = /^1d{10}$/;
b = GetFlase(value, reg, this);
반환 휴식;
>                                                                                                    케이스 "이메일":
var reg = /^[w-] (.[w-] )*@[w-] (.[w-] ) $/;
b = GetFlase(value, reg, this);
반환 휴식;
///두 비밀번호가 일치합니까?                                                                                   대소문자 "비밀번호":
휴식;
케이스 "password2":
If ($("#password").attr("value") != $("#password2").attr("value")) {
~ $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
~ ~  | 휴식;
사례 "worktel":
case "hometel": //집 전화번호
~ ~       var reg = /^d{8}$/;
b = GetFlase(value, reg, this);
반환 휴식;
                         사례 "post": //우편번호
                                         var reg = /^d{6}$/;
b = GetFlase(value, reg, this);
반환 휴식;
사례 "보너스":
사례 "수당":
"FixedSalary"의 경우:
var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0|[1-9]d)$/;
b = GetFlase(value, reg, this);
반환 휴식;
케이스 "ID":
                          var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
b = GetFlase(value, reg, this);
반환                            휴식;
                        케이스 "높이":
                            var reg = /^[1-2][0-9][0-9]$/;
                            return b = GetFlase(value, reg, this);
                            휴식;
                        케이스 "qq":
                            var reg = /^[1-9][0-9]{4,}$/;
                            return b = GetFlase(value, reg, this);
                            휴식;
                        사례 "시작":
                        사례 "종료 시간":
                            var reg = /^d{4}$/;
                            if (reg.test(value) && (parseInt($(".endtime").val()) >parseInt($(".begintime").val()))) {
                                b를 돌려주세요;
                            }
                            $.ligerDialog.alert($(this).attr("msg"))
                            $(this).select(); //获取焦点
                            b = 거짓을 반환합니다; //부담이 없습니다
                            휴식;
                        케이스 "번호":
                            var reg = /^d $/;
                            return b = GetFlase(value, reg, this);
                            휴식;
                        ///大陆去去港需要办理往来港澳行证 ​​and 香港的签注.因私普通护光号码格式有:                                                      
///14/15 7자리, G 8자리; ///일반적인 것은: P. 7 자리; ///공식용: S. 7자리 또는 //S 8자리, D로 시작하는 외교관여권                              사례 "postport": //여권번호
                             var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd |1[4,5]d{7})$/;
b = GetFlase(value, reg, this);
반환 휴식;
"은행 계좌"의 경우:
                                  var reg = /^[0-9]{19}$/;
b = GetFlase(value, reg, this);
반환 휴식;
                           } //스위치
                                                    //for
            }
        });
         반환 b;
}
///이 메소드는 더 이상 사용되지 않습니다
});
///배경색을 변경하려면 클릭하세요
$(문서).ready(함수 () {
var inputs = $("#top>.c>input");
$(입력).each(함수 () {
This.onclick = 함수 () {
               document.getElementById("main").style.BackgroundColor = this.name;
                    //$("#main").BackgroundColor = this.name;
}
});
});



위 코드는 캡슐화된 범용 형식 감지 방법입니다. 마음에 드셨으면 좋겠습니다