jQuery.validate是一個常用的表單驗證插件,它可以幫助我們對表單進行自定義的驗證,并可以在失去焦點時立即驗證。下面就來介紹一下在jQuery.validate中如何實現失去焦點驗證。
首先,我們需要引入jQuery和jQuery.validate兩個庫文件:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
然后,我們就可以在表單中添加需要驗證的字段,并為其添加規則:
<form id="form-demo">
<div>
<input type="text" id="username" name="username" required minlength="2" maxlength="20">
</div>
<div>
<input type="email" id="email" name="email" required email>
</div>
<div>
<input type="password" id="password" name="password" required minlength="6">
</div>
<button type="submit">提交</button>
</form>
接下來,我們就可以使用jQuery.validate中的方法來進行驗證,其中,我們需要使用到一個focusout方法,該方法可以在失去焦點時進行驗證。我們可以調用validate方法來初始化表單驗證,并指定需要驗證的規則。然后,我們可以為需要驗證的字段添加失去焦點的回調方法,當失去焦點時,就會自動進行相應的驗證。
<script>
$('#form-demo').validate({
rules: {
username: {
required: true,
minlength: 2,
maxlength: 20
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
}
}
});
$('#username').focusout(function() {
$(this).valid();
});
$('#email').focusout(function() {
$(this).valid();
});
$('#password').focusout(function() {
$(this).valid();
});
</script>
至此,我們就成功地實現了在失去焦點時對表單進行驗證的功能。使用jQuery.validate可以讓我們更方便地處理表單驗證,大大減少了代碼量,提高了開發效率。