「jQuery系列」jQuery 校验表单(Validate)
// 确保在文档完全加载后执行
$(document).ready(function() {
// 验证表单
$('#form-validate').validate({
// 设置验证规则
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
password_confirmation: {
required: true,
equalTo: '#password'
},
terms: {
required: true
}
},
// 设置错误消息
messages: {
name: {
required: "请输入您的姓名",
minlength: "姓名至少需要两个字符"
},
email: "请输入一个有效的电子邮件地址",
password: {
required: "请输入一个密码",
minlength: "密码至少需要5个字符"
},
password_confirmation: {
required: "请确认您的密码",
equalTo: "两次输入的密码不一致"
},
terms: "请接受服务条款"
},
// 设置错误提示的样式
errorElement: 'span',
errorPlacement: function(error, element) {
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
},
highlight: function(element, errorClass, validClass) {
$(element).addClass('is-invalid');
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass('is-invalid');
}
});
});
这段代码使用jQuery插件jQuery Validate来验证一个表单。它设置了各表单字段的验证规则和错误消息,并定义了错误提示的样式。当文档加载完成后,它会自动应用验证规则,如果用户试图提交含有无效数据的表单,它会显示错误消息并为字段添加相应的样式。
评论已关闭