jquery.validate menggesa mesej ralat lokasi method_jquery

Contoh dalam artikel ini menerangkan kaedah lokasi mesej ralat segera jquery.validate. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Saya sudah lama tidak menggunakan pemalam jquery.validate.js dan saya hampir terlupa tentangnya. Malangnya, perkara yang baik harus sentiasa dikeluarkan dan dilihat Hari ini saya menggunakan jquery.validate untuk membuat satu masalah kecil, iaitu lokasi mesej ralat itu. Saya telah menemuinya sebelum ini, tetapi saya terlupa sekarang Jika saya melupakannya pada masa hadapan, saya akan melihat ke belakang. Bak kata pepatah, ingatan yang baik adalah lebih buruk daripada tulisan yang buruk.

Sebagai contoh, semua orang akan tahu apa yang berlaku.

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();
}
}
});

Dalam kod di atas, saya tidak menambah kaedah untuk menyimpan mesej ralat. Mari kita lihat kesannya

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

Jika kami menambah kaedah peletakan ralat lokasi mesej ralat, mari lihat kesannya.

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();
}
}
});

Jom lihat kesannya

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

Ia cukup mudah walaupun perkara yang mudah akan dilupakan jika anda tidak menggunakannya untuk masa yang lama.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan pemalam jQuery boleh menyemak topik khas tapak ini: " Ringkasan pemalam dan penggunaan jQuery biasa"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.