Un plug-in de validation de formulaire jquery utile

Cette fois, je vous propose un plug-in de validation de formulaire jquery utile. Quelles sont les précautions lors de l'utilisation du plug-in de validation de formulaire jquery. Voici des cas pratiques, jetons un coup d'œil.

Plug-in de validation de jquery
Connaissances préalables : règles de validation par défaut

Utilisation : Présentez jquery.js, jquery.validate.min.js et validate-config.js dans l'ordre
Exemple :

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

Les lignes 1 à 14 du code ajoutent des informations de vérification, et le code après la ligne 16 personnalise la fonction de vérification. Si la valeur de retour est fausse, la vérification est affichée. informations ci-dessus.
Le code ci-dessus est la définition de la règle de validation, et le code suivant démarre la vérification :

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

Les lignes 6 à 23 expliquent quelles règles utiliser, et la ligne 25 est la surveillance des événements pour la soumission du formulaire.
Remarque : Si vous souhaitez modifier la position des informations de vérification dans la structure dom, utilisez errorPlacement, comme suit :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour des informations plus intéressantes, veuillez consulter le site Web chinois php Autres articles connexes !

Lecture connexe :

Une brève introduction au principe de clearfix en CSS

Un résumé des fonctions courantes en JS

Explication détaillée du modèle de boîte de HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!