Ein nützliches Plug-in zur Validierung von JQuery-Formularen

Dieses Mal bringe ich Ihnen ein nützliches JQuery-Formularvalidierungs-Plug-In. Was sind die Vorsichtsmaßnahmen bei der Verwendung des JQuery-Formularvalidierungs-Plug-Ins?

jquerys Validierungs-Plug-in
Vorausgesetzte Kenntnisse: Standardvalidierungsregeln

Verwendung: Führen Sie jquery.js, jquery.validate.min.js und validate-config.js der Reihe nach ein
Beispiel:

$.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 );
},"输入格式不正确");

Die Zeilen 1 bis 14 des Codes fügen Verifizierungsinformationen hinzu und der Code nach Zeile 16 passt die Verifizierungsfunktion an. Wenn der Rückgabewert falsch ist, wird eine Verifizierung angezeigt Informationen oben.
Der obige Code ist die Definition der Validierungsregel, und der folgende Code startet die Überprüfung:

<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>

Zeilen 6 bis 23 erläutern, welche Regeln verwendet werden sollen, und Zeile 25 ist die Ereignisüberwachung für die Formularübermittlung.
Hinweis: Wenn Sie die Position der Verifizierungsinformationen in der Dom-Struktur ändern möchten, verwenden Sie errorPlacement wie folgt:

$('.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标签
    }
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Verwandte Lektüre:

Eine kurze Einführung in das Clearfix-Prinzip in CSS

Eine Zusammenfassung allgemeiner Funktionen in JS

Detaillierte Erläuterung des Box-Modells von HTML

Das obige ist der detaillierte Inhalt vonEin nützliches Plug-in zur Validierung von JQuery-Formularen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!