js 검증 모델 자체 실현 의 구체 적 인 방법

24810 단어 검증 하 다.모형.자아 실현
시장 에 많은 양식 검증 의 틀 이 있 습 니 다.우리 에 게 양식 의 데 이 터 를 어떻게 검증 하고 제출 하 는 지 가르쳐 주 었 습 니 다.솔직히 정말 간단 합 니 다.그러나 우 리 는 우리 가 이런 틀 을 벗 어 날 때 우 리 는 속수무책 이 될 때 가 있 습 니 다.그리고 js 검증 은 불규칙 하고 좋 은 모델 이 없다 는 느낌 이 들 것 입 니 다.그럼 제 가 이 편 을 쓰 는 목적 은 바로 js 검증 이 어떤 모습 이 어야 하 는 지 천천히 보 는 것 입 니 다.만약 에 우리 가 지금 로그 인 한 페이지 를 쓴다 고 가정 하면(이것 은 가장 간단 한 데이터 제출 일 수 있 습 니 다)html 페이지 에 사용자 이름과 비밀번호 가 있 는 텍스트 상자 가 사용자 에 게 자신의 사용자 이름과 비밀 번 호 를 입력 하 게 할 것 입 니 다.우 리 는 사용자 이름과 비밀번호 가 비어 있 는 지 판단 해 야 합 니 다.이러한 js 검증 판단 은 onblur 이벤트 에 놓 여 있 는 것 이 분명 합 니 다.html 코드 는 다음 과 같 습 니 다.
ValidateHelper 는 하나의 대상 이다.일부 검증 방법 은 바로 이 대상 안에 있다.우 리 는 js 검증 사용자 의 입력 이 두 번 의 결과 가 있 고 하 나 는 성공 이 며 하 나 는 실패 라 고 규정 한다.성공 할 때 우 리 는 성공 적 인 힌트 를 출력 합 니 다.실패 할 때 우 리 는 실패 한 힌트 를 출력 합 니 다.해당 하 는 두 가지 출력 방법:

    normalMessage: function(jqueryObj, msg) {
        var emObj = $(jqueryObj.parent().find('em')[0]);
        emObj.empty().append(msg);
    },
    warningMessage: function(jqueryObj, msg) {
        ValidateHelper.clearMessage(jqueryObj);
        var emObj = $(jqueryObj.parent().find('em')[0]);
        var spanElement = "<span style='color:#FF4C31;float:left;height:23px;line-height:23px;padding:0 10px 0 35px;'>"
                + msg
                + "</span>";
        emObj.empty().append(spanElement);

    },
그리고 힌트 를 제거 하 는 방법 도 있 습 니 다.

clearMessage: function(jqueryObj) {
    var emObj = $(jqueryObj.parent().find('em')[0]);
    emObj.empty();
},
우 리 는 성공 과 실패 알림 방법,그리고 힌트 를 제거 하 는 방법 을 썼 습 니 다.이 세 가 지 는 우리 가 뒤에서 계속 호출 할 기본 적 인 방법 입 니 다.자,사용자 의 입력 이 비어 있 지 않 음 을 검증 하 는 방법 을 쓰 겠 습 니 다.

    validateStringValueIsEmpty: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if ($.trim(jqueryObj.val()).length == 0) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
이 방법 은 onblur 에서 호출 되 는 검증 방법 입 니 다.그 중에서 도 성공 과 실패 알림 방법,그리고 알림 을 제거 하 는 방법 이 자 연 스 럽 게 사 용 됩 니 다.인 자 는 세 가지 가 있 습 니 다.검증 할 Dom 또는 jQuery 대상,성공 알림 정보,실패 알림 정보 입 니 다.만약 시간 이 없 으 면 실패 하고,시간 이 없 으 면 성공 한다.위 에 적 힌 방법 은 onblur 에서 실 행 됩 니 다.저 희 는 데 이 터 를 제출 할 때 도 사용 합 니 다.

    initInfo: function() {

        var userName = $('#email');
        var userPwd = $('#setPwd');
        if (!ValidateHelper.validateStringValueIsEmpty(userName, '  ', '    ')) {
            userName.focus();
            return null;
        }
        if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '  ', '    ')) {
            userPwd.focus();
            return null;
        }


        var userInfo = {
            UserName: userName.val(),
            UserPwd: userPwd.val()
        };


        return userInfo;
    },


    post: function() {


        var userInfo = ValidateHelper.initInfo();
        if (userInfo == null) {
            return;
        }


        $.ajax({
            type: "post",
            dataType: "text",
            url: "Ajax/Module.aspx",
            timeout: 30000,
            data: { UserName: userInfo.UserName, UserPwd: userInfo.UserPwd },
            success: function(data) {
                alert(data.toString());
            }
        });
    }
이쪽 은 데 이 터 를 제출 할 때 vaidate String Value IsEmpty 방법 을 호출 합 니 다.실 패 했 을 때 서버 에 제출 하지 않 습 니 다.그 위의 상황 은 가장 간단 한 처리 가 비어 있 지 않 은 상황 입 니 다.만약 에 우리 가 Email 이 신분증 번호 인지 검증 하고 싶다 면 이런 복잡 한 검증 은 다음 과 같 습 니 다.
 
var Validation = {
    textCount: function(field, counter, maxLimit) {
        var message = $(field).val();
        if ($(field).val().length > maxLimit)
            $(field).val(message.substring(0, maxLimit))
        //$(counter).text(maxLimit-field.value.length);    
    },
    refreshValidator: function(img, input) {
        $(img).attr('src', $(img).attr('src') + "&r=" + Math.random());
        $(input).focus();
    },
    isUrl: function(s) {
        var strRegex =
                            /^((http(s)?|ftp|telnet|news|rtsp|mms):\/\/)?(((\w(\-*\w)*\.)+[a-zA-Z]{2,4})|(((1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).){3}(1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).?))(:\d{0,5})?(\/+.*)*$/;
        return strRegex.test(s);
    },
    isDecimal: function(d) { var pattern = /^(([1-9]\d{0,12})|0)(\.\d{1,2})?$/; return pattern.test(d); },
    isEmail: function(s) {
        var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
        return pattern.test(s);
    },
    isLowEmail: function(s) {
        var b, e;
        b = s.indexOf("@");
        e = s.indexOf(".");
        if (b <= 0) return false;
        if (e < 0 || e == (s.length - 1)) { return false; }
        return true;
    },
    clearNoNum: function(event, obj) {
        event = window.event || event;
        if (event.keyCode == 37 | event.keyCode == 39) {
            return;
        }
        obj.value = obj.value.replace(/[^\d.]/g, "");
        obj.value = obj.value.replace(/^\./g, "");
        obj.value = obj.value.replace(/\.{2,}/g, ".");
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    },
    checkNum: function(obj) {
        obj.value = obj.value.replace(/\.$/g, "");
    },
    isInteger: function(value) {
        var integerReg = new RegExp(/^\d+$/);
        return integerReg.test(value);
    },
    isValidateReg: function(value) {
        var validateReg = /^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\'\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
        if (validateReg.test(value)) {
            return true;
        }
        return false;
    },
    isDate: function(strValue) {
        var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/

        if (!objRegExp.test(strValue))
            return false;
        else {
            var arrayDate = strValue.split(RegExp.$1);
            var intDay = parseInt(arrayDate[2], 10);
            var intYear = parseInt(arrayDate[0], 10);
            var intMonth = parseInt(arrayDate[1], 10);
            if (intMonth > 12 || intMonth < 1) {
                return false;
            }
            var arrayLookup = { '1': 31, '3': 31, '4': 30, '5': 31, '6': 30, '7': 31,
                '8': 31, '9': 30, '10': 31, '11': 30, '12': 31
            }
            if (arrayLookup[parseInt(arrayDate[1])] != null) {
                if (intDay <= arrayLookup[parseInt(arrayDate[1])] && intDay != 0)
                    return true;
            }
            if (intMonth - 2 == 0) {
                var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0));
                if (((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <= 28)) && intDay != 0)
                    return true;
            }
        }
        return false;
    },
    isZip: function(value) {
        var validateReg = /^[0-9]{6}$/;
        return validateReg.test(value);
    },
    checkSpecialChar: function(value) {
        var validateReg = /([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
        return validateReg.test(value);
    },
    CheckSpecialString: function(value) {
        var validateReg = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
        return validateReg.test(value);
    },
    isTel: function(s) {
        var patrn = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
        if (!patrn.exec(s)) return false
        return true
    },


    isMobile: function(value) {
        var validateReg = /^1\d{10}$/;
        return validateReg.test(value);
    },
    getLength: function(value) {
        return value.replace(/[^\x00-\xff]/g, "**").length;
    },
    isLicence: function(value) {
        var validateReg = /^[A-Za-z]{10}[0-9]{10}$/;
        return validateReg.test(value);
    },
    isPersonalCard: function(value) {
        var validateReg = /(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
        return validateReg.test(value);
    },
    isOrganizationCodeCard: function(value) {
        var validateReg = /^[A-Za-z0-9]{9}$/;
        return validateReg.test(value);
    },
    isBankAccount: function(value) {
        var validateReg = /^[1-9]{1}[0-9]*$/;
        return validateReg.test(value);
    },
    MaxLength: function(field, maxlimit) {
        var j = field.value.replace(/[^\x00-\xff]/g, "**").length;
        var tempString = field.value;
        var tt = "";
        if (j > maxlimit) {
            for (var i = 0; i < maxlimit; i++) {
                if (tt.replace(/[^\x00-\xff]/g, "**").length < maxlimit)
                    tt = tempString.substr(0, i + 1);
                else
                    break;
            }
            if (tt.replace(/[^\x00-\xff]/g, "**").length > maxlimit) {
                tt = tt.substr(0, tt.length - 1);
                field.value = tt;
            }
            else {
                field.value = tt;
            }
        }
    }
};
이런 유형 은 Email,신분증 번호 등 을 검증 하 는 정규 표현 식 을 써 서 우리 가 나중에 사용 할 수 있 도록 합 니 다.사용 방법 은 다음 과 같다.

    validateStringValueForEmail: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "  ", "    ")) {
            ValidateHelper.warningMessage(jqueryObj, "    ");
            return false;
        }
        if (!Validation.isEmail(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
    validateStringValueForCardID: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "  ", "    ")) {
            ValidateHelper.warningMessage(jqueryObj, "    ");
            return false;
        }
        if (!Validation.isPersonalCard(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
그러면 이쪽 으로 오 면 우리 의 일반적인 js 검증 을 처리 할 수 있다.나중에 자신의 프레임 에 사용 해 볼 수 있다.우 리 는 자신 이 디 버 깅 한 소스 코드 를 첨부 할 수 있다.ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FormValidateModuleEx._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script src="js\jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="js\MyValidate.js" type="text/javascript"></script>
    <%--<script src="js\CheckPersonCardID.js" type="text/javascript"></script>--%>
</head>
<body>
    <div>
        <li>
            <label for="email">
                   ：
            </label>
            <input name="email" type="text" id="email" maxlength="50" onblur="return ValidateHelper.validateStringValueIsEmpty($(this),'  ','    ');" /><em></em>
        </li>
        <li>
            <label for="setPwd">
                  ：
            </label>
            <input name="setPwd" type="password" id="setPwd" maxlength="16" onblur="return ValidateHelper.validateStringValueIsEmpty($(this),'  ','    ');" /><em></em>
        </li>
        <li>
            <label for="setPwd">
                   ：
            </label>
            <input name="cardId" type="text" id="cardId" onblur="return ValidateHelper.validateStringValueForCardID($(this),'  ','        ');" /><em></em><%--IdCardValidate($(this),'         ');--%>
        </li>
        <li>
            <label for="setPwd">
                Email：
            </label>
            <input name="againEmail" type="text" id="againEmail" onblur="return ValidateHelper.validateStringValueForEmail($(this),'  ','email     ');" /><em></em>
        </li>
        <li><input onclick="return ValidateHelper.post();" type="button" id="btnPost" /></li> 
    </div>
</body>
</html>
js:

var Validation = {
    textCount: function(field, counter, maxLimit) {
        var message = $(field).val();
        if ($(field).val().length > maxLimit)
            $(field).val(message.substring(0, maxLimit))
        //$(counter).text(maxLimit-field.value.length);    
    },
    refreshValidator: function(img, input) {
        $(img).attr('src', $(img).attr('src') + "&r=" + Math.random());
        $(input).focus();
    },
    isUrl: function(s) {
        var strRegex =
                            /^((http(s)?|ftp|telnet|news|rtsp|mms):\/\/)?(((\w(\-*\w)*\.)+[a-zA-Z]{2,4})|(((1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).){3}(1\d\d|2([0-4]\d|5[0-5])|[1-9]\d|\d).?))(:\d{0,5})?(\/+.*)*$/;
        return strRegex.test(s);
    },
    isDecimal: function(d) { var pattern = /^(([1-9]\d{0,12})|0)(\.\d{1,2})?$/; return pattern.test(d); },
    isEmail: function(s) {
        var pattern = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
        return pattern.test(s);
    },
    isLowEmail: function(s) {
        var b, e;
        b = s.indexOf("@");
        e = s.indexOf(".");
        if (b <= 0) return false;
        if (e < 0 || e == (s.length - 1)) { return false; }
        return true;
    },
    clearNoNum: function(event, obj) {
        event = window.event || event;
        if (event.keyCode == 37 | event.keyCode == 39) {
            return;
        }
        obj.value = obj.value.replace(/[^\d.]/g, "");
        obj.value = obj.value.replace(/^\./g, "");
        obj.value = obj.value.replace(/\.{2,}/g, ".");
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    },
    checkNum: function(obj) {
        obj.value = obj.value.replace(/\.$/g, "");
    },
    isInteger: function(value) {
        var integerReg = new RegExp(/^\d+$/);
        return integerReg.test(value);
    },
    isValidateReg: function(value) {
        var validateReg = /^([A-Za-z0-9\s\-\_\~\!\@\#\$\%\^\&\*\(\)\|\<\>\?\:\;\"\'\.\[\]\{\}\,\+\`\/\\\=]){6,16}$/;
        if (validateReg.test(value)) {
            return true;
        }
        return false;
    },
    isDate: function(strValue) {
        var objRegExp = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/

        if (!objRegExp.test(strValue))
            return false;
        else {
            var arrayDate = strValue.split(RegExp.$1);
            var intDay = parseInt(arrayDate[2], 10);
            var intYear = parseInt(arrayDate[0], 10);
            var intMonth = parseInt(arrayDate[1], 10);
            if (intMonth > 12 || intMonth < 1) {
                return false;
            }
            var arrayLookup = { '1': 31, '3': 31, '4': 30, '5': 31, '6': 30, '7': 31,
                '8': 31, '9': 30, '10': 31, '11': 30, '12': 31
            }
            if (arrayLookup[parseInt(arrayDate[1])] != null) {
                if (intDay <= arrayLookup[parseInt(arrayDate[1])] && intDay != 0)
                    return true;
            }
            if (intMonth - 2 == 0) {
                var booLeapYear = (intYear % 4 == 0 && (intYear % 100 != 0 || intYear % 400 == 0));
                if (((booLeapYear && intDay <= 29) || (!booLeapYear && intDay <= 28)) && intDay != 0)
                    return true;
            }
        }
        return false;
    },
    isZip: function(value) {
        var validateReg = /^[0-9]{6}$/;
        return validateReg.test(value);
    },
    checkSpecialChar: function(value) {
        var validateReg = /([~!@#$%^&*\/\\,.\(\)]){6,16}$/;
        return validateReg.test(value);
    },
    CheckSpecialString: function(value) {
        var validateReg = /[\u0000-\u0008\u000B\u000C\u000E-\u001F\uD800-\uDFFF\uFFFE\uFFFF]/;
        return validateReg.test(value);
    },
    isTel: function(s) {
        var patrn = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/
        if (!patrn.exec(s)) return false
        return true
    },


    isMobile: function(value) {
        var validateReg = /^1\d{10}$/;
        return validateReg.test(value);
    },
    getLength: function(value) {
        return value.replace(/[^\x00-\xff]/g, "**").length;
    },
    isLicence: function(value) {
        var validateReg = /^[A-Za-z]{10}[0-9]{10}$/;
        return validateReg.test(value);
    },
    isPersonalCard: function(value) {
        var validateReg = /(^\d{15}$)|(^\d{17}(\d|[A-Za-z]{1})$)/;
        return validateReg.test(value);
    },
    isOrganizationCodeCard: function(value) {
        var validateReg = /^[A-Za-z0-9]{9}$/;
        return validateReg.test(value);
    },
    isBankAccount: function(value) {
        var validateReg = /^[1-9]{1}[0-9]*$/;
        return validateReg.test(value);
    },
    MaxLength: function(field, maxlimit) {
        var j = field.value.replace(/[^\x00-\xff]/g, "**").length;
        var tempString = field.value;
        var tt = "";
        if (j > maxlimit) {
            for (var i = 0; i < maxlimit; i++) {
                if (tt.replace(/[^\x00-\xff]/g, "**").length < maxlimit)
                    tt = tempString.substr(0, i + 1);
                else
                    break;
            }
            if (tt.replace(/[^\x00-\xff]/g, "**").length > maxlimit) {
                tt = tt.substr(0, tt.length - 1);
                field.value = tt;
            }
            else {
                field.value = tt;
            }
        }
    }
};



var ValidateHelper = {
    validateStringValueIsEmpty: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if ($.trim(jqueryObj.val()).length == 0) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
    validateStringValueForEmail: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "  ", "    ")) {
            ValidateHelper.warningMessage(jqueryObj, "    ");
            return false;
        }
        if (!Validation.isEmail(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
    validateStringValueForCardID: function(obj, normalMsg, warningMsg) {
        var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
        if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "  ", "    ")) {
            ValidateHelper.warningMessage(jqueryObj, "    ");
            return false;
        }
        if (!Validation.isPersonalCard(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
            return false;
        }
        else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
            return true;
        }
    },
    normalMessage: function(jqueryObj, msg) {
        var emObj = $(jqueryObj.parent().find('em')[0]);
        emObj.empty().append(msg);
    },
    warningMessage: function(jqueryObj, msg) {
        ValidateHelper.clearMessage(jqueryObj);
        var emObj = $(jqueryObj.parent().find('em')[0]);
        var spanElement = "<span style='color:#FF4C31;float:left;height:23px;line-height:23px;padding:0 10px 0 35px;'>"
                + msg
                + "</span>";
        emObj.empty().append(spanElement);


    },
    clearMessage: function(jqueryObj) {
        var emObj = $(jqueryObj.parent().find('em')[0]);
        emObj.empty();
    },
    initInfo: function() {


        var userName = $('#email');
        var userPwd = $('#setPwd');
        if (!ValidateHelper.validateStringValueIsEmpty(userName, '  ', '    ')) {
            userName.focus();
            return null;
        }
        if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '  ', '    ')) {
            userPwd.focus();
            return null;
        }


        var userInfo = {
            UserName: userName.val(),
            UserPwd: userPwd.val()
        };


        return userInfo;
    },


    post: function() {


        var userInfo = ValidateHelper.initInfo();
        if (userInfo == null) {
            return;
        }


        $.ajax({
            type: "post",
            dataType: "text",
            url: "Ajax/Module.aspx",
            timeout: 30000,
            data: { UserName: userInfo.UserName, UserPwd: userInfo.UserPwd },
            success: function(data) {
                alert(data.toString());
            }
        });
    }
}
js 간이 namespace 관리자 인 스 턴 스 코드
JavaScript 의 this 키워드 소개 및 사용 실례

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage