유용한 jquery 양식 유효성 검사 플러그인

이번에는 유용한 jquery 양식 유효성 검사 플러그인을 가져왔습니다. jquery 양식 유효성 검사 플러그인을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

jquery의 유효성 검사 플러그인
전제 지식: 기본 유효성 검사 규칙

사용법: jquery.js, jquery.validate.min.js 및 verify-config.js를 순서대로 소개
예:

$.extend($.validator.messages, {    required: "这是必填字段",    ip: "输入格式不正确",    number: '请输入数字',    max: "输入超过了最大值",    min: "输入小于最小值",    minlength: $.validator.format( "输入字符不能少于 {0} 个." ),    maxlength: $.validator.format( "输入字符不能多于 {0} 个." ),    mask: "网关不可达",    remote: "该名称已存在",    equalTo: "两次输入密码不匹配",    notEqualTo: "新密码不能与原始密码相同",    pw  : "必须包含数字、英文字母、特殊字符, 并且大于等于8位"});
$.validator.addMethod("ip",function(value,element,params){    var ipReg = /^(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)\.(?:25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)$/;    if( value === '' ) {        return true;
    }    return ipReg.test( value );
},"输入格式不正确");

코드 1번 줄 14행에는 검증 정보를 추가하고, 16행 이후의 코드는 검증 기능을 사용자 정의합니다. 반환 값이 false인 경우 위의 검증 정보가 표시됩니다.
위 코드는 검증 규칙의 정의이며, 다음 코드는 검증을 시작합니다.

<script src="xx/jquery.js"></script><script src="xx/jquery.validate.min.js"></script><script src="xx/validate-config.js"></script><script>
    var $form = $("#form");
    $form.validate( {        rules: {            id: {                required: true
            },            ip: {                required: true,                ip: true //这个不是写错，而是说明了要使用自定义（$.validator.addMethod）的ip验证方法
            },            username: {                required: true
            },            pw: {                required: true
            }
        },        ignore: &#39;.ignore&#39;
    } );
    $form.on("submit", function () {      if ( $form.valid() ) { //$form.valid返回值为true验证通过
        //验证通过执行的代码
      }
    })</script>

6~23행은 어떤 규칙을 사용해야 하는지 설명하고, 25행은 양식 제출에 대한 이벤트 모니터링입니다.
참고: DOM 구조에서 확인 정보의 위치를 ​​변경하려면 다음과 같이 errorPlacement를 사용하세요.

$('.lock-form-register').validate({    rules: {        username: {            required: true,            username: true

        },        password: {            required: true,            pw: true           
        },        confirmpwd : {            required : true,            equalTo : "#pw",             pw: true
        }
    },    errorPlacement: function(error, element) {        //element是被验证的元素，error是包含错误信息的label标签
    }
});

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 자료:

CSS의 클리어픽스 원리에 대한 간략한 소개

JS의 일반적인 기능 요약

html의 박스 모델에 대한 자세한 설명

위 내용은 유용한 jquery 양식 유효성 검사 플러그인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!