利用 jquery 做頁面輸入欄位檢核

軟體的部份需要 jquery 及 jQuery plugin: Validation

首先假設頁面上有以下的 form

<form id=”myform”>

<input type=”text” name=”userid” id=”userid”>

</form>

要進行輸入欄位檢核時在頁面加入以下的 javascript code

$(document).ready( function() {

$(‘#myform’).validate({

invalidHandler: function(form, validator) {

},

errorPlacement: function(error, element) {

}

});
});

invalidHandler、errorPlacement 用於檢核有誤時進行處理,請自行定義,接著加入檢核的 rule

$(‘#userid’).rules(‘add’, {

required6digits: true,

messages:{required6digits:”必須為6位數數值!”}    });

以上的 code 為 userid 欄位加入檢核項目 required6digits,plugin 提供了一些預設的檢核功能,這個例子我們是自行定義檢核欄位必須為6個數字,在 document ready 時加入以下 code

jQuery.validator.addMethod(“required6digits”, function(value, element, params) {

var regEx = /\d{6}/;

return regEx.test(value);

});

從以上的例子我們可以做出自行定義的檢核規則,最後利用以下 code 進行 form 的檢核

$(‘#myform’).valid()

如果傳回 true 即是檢核成功,如果傳回 false 即是檢核有誤

 

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...