非表单项的验证可以通过jQuery Validation插件实现。以下是一个简单的示例:
<div id="error-message"></div>
$(document).ready(function() {
// 定义验证规则
var rules = {
nonFormItem: {
required: true,
email: true
}
};
// 定义错误信息
var messages = {
nonFormItem: {
required: "请输入非表单项",
email: "请输入有效的电子邮件地址"
}
};
// 应用验证规则
var validator = $("#nonFormItem").validate({
rules: rules,
messages: messages,
errorElement: "span",
errorPlacement: function(error, element) {
$("#error-message").html(error);
},
success: function(error) {
error.html("");
}
});
// 监听非表单项的更改事件
$("#nonFormItem").on("change", function() {
validator.element("#nonFormItem");
});
});
在这个示例中,我们定义了一个名为nonFormItem
的验证规则,该规则要求输入非表单项的值并且该值必须是一个有效的电子邮件地址。然后,我们将这个验证规则应用于一个名为#nonFormItem
的HTML元素上,并在更改事件中触发验证。
这样,我们就可以在非表单项上实现验证功能,并在验证失败时显示错误信息。
领取专属 10元无门槛券
手把手带您无忧上云