要通过 jQuery Validate 实现实时验证,您需要:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<span class="error"></span>
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" required>
<span class="error"></span>
<br>
<input type="submit" value="提交">
</form>
validate
事件监听器,并在其中调用 valid()
方法进行实时验证。同时,可以为每个输入字段添加 keyup
事件监听器,在用户输入时触发验证。例如:$(document).ready(function() {
// 初始化验证
$("#myForm").validate({
rules: {
username: {
required: true,
minlength: 4
},
email: {
required: true,
email: true
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名至少需要4个字符"
},
email: {
required: "请输入邮箱地址",
email: "请输入有效的邮箱地址"
}
}
});
// 为每个输入字段添加 keyup 事件监听器以实时触发验证
$("#username, #email").keyup(function() {
$(this).valid();
});
});
现在,当用户在表单中输入时,jQuery Validate 将根据设置的规则进行实时验证,并在输入字段旁边显示错误消息(如果有)。