jquery.validate invite l'emplacement du message d'erreur method_jquery

L'exemple de cet article décrit la méthode de localisation du message d'erreur de l'invite jquery.validate. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Je n'ai pas utilisé le plug-in jquery.validate.js depuis longtemps et je l'ai presque oublié. Hélas, les bonnes choses doivent toujours être retirées et examinées. Aujourd'hui, j'ai utilisé jquery.validate pour créer une petite chose, qui est l'emplacement du message d'erreur. Si vous le connaissez, c'est très simple. Je l'ai déjà rencontré, mais je l'ai oublié maintenant. Si je l'oublie à l'avenir, je regarderai en arrière. Comme le dit le proverbe, une bonne mémoire est pire qu’une mauvaise écriture.

À titre d’exemple, tout le monde saura ce qui se passe.

rules: {
name:{
required:true,
rangelength:[1,20]
},
validateCode: {
required:true,
number:true,
rangelength:[5,5]
}
},
messages: {
name: {
required: "请输入命令名",
rangelength: jQuery.format("长度请控制在{0} ~ {1}")
},
validateCode: {
required: "请输入验证码",
number: "请输入数字",
rangelength: jQuery.format("长度必须是5位")
}
},
success: function(label) {
label.addClass("error checked");
},
submitHandler: function(form) {
if($("#RegionId").val() == '0'){
$("#citySelect").attr("class","error").html('请选择区域').show();
$("#RegionId").attr("class","error");
}else{
$("#RegionId").attr("class","valid");
$("#citySelect").attr("class","valid").html('success').show();
form.submit();
}
}
});

Dans le code ci-dessus, je n'ai pas ajouté de méthode pour stocker le message d'erreur. Jetons un coup d'œil à l'effet

<td>
<input type="text" maxlength="30" value="" id="name" name="name">
<label for="name" generated="true">请输入命令名</label>
//错误信息会自动根在输入框的后面。
</td>

Si nous ajoutons la méthode errorPlacement d'emplacement du message d'erreur, voyons à quoi ressemble l'effet.

rules: {
name:{
required:true,
rangelength:[1,20]
},
validateCode: {
required:true,
number:true,
rangelength:[5,5]
}
},
messages: {
name: {
required: "请输入命令名",
rangelength: jQuery.format("长度请控制在{0} ~ {1}")
},
validateCode: {
required: "请输入验证码",
number: "请输入数字",
rangelength: jQuery.format("长度必须是5位")
}
},
errorPlacement: function(error, element) { //错误信息位置设置方法
error.appendTo( element.parent().next() ); //这里的element是录入数据的对象
},
success: function(label) {
label.addClass("error checked");
},
submitHandler: function(form) {
if($("#RegionId").val() == '0'){
$("#citySelect").attr("class","error").html('请选择区域').show();
$("#RegionId").attr("class","error");
}else{
$("#RegionId").attr("class","valid");
$("#citySelect").attr("class","valid").html('success').show();
form.submit();
}
}
});

Voyons l'effet

<tr>
<th><label for="name" id="lname"><code title="必填">*</code>命令名称</label></th>
<td><input type="text" maxlength="30" value="" id="name" name="name"></td>
<td><label for="name" generated="true">请输入命令名</label></td>
//错误信息跑到这儿来了，
</tr>

C'est assez simple. Même les choses simples seront oubliées si vous ne les utilisez pas pendant une longue période.

Les lecteurs intéressés par plus de contenu lié aux plug-ins jQuery peuvent consulter le sujet spécial de ce site : " Résumé des plug-ins jQuery courants et de leur utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.