jquery表单校验
jQuery表单校验的实现方法
jQuery表单校验可以通过多种方式实现，包括使用原生jQuery方法或借助插件如jQuery Validation。以下是几种常见的方法：
使用jQuery原生方法进行基础校验
通过选择器获取表单元素值，编写自定义校验逻辑：
$('#myForm').submit(function(event) {
var email = $('#email').val();
if (!email.includes('@')) {
alert('请输入有效的邮箱地址');
event.preventDefault();
}
});引入jQuery Validation插件
官方插件提供丰富的校验规则和自定义选项：
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>$("#myForm").validate({
rules: {
username: { required: true, minlength: 3 },
email: { required: true, email: true }
},
messages: {
username: "至少3个字符",
email: "请输入有效邮箱"
}
});自定义校验方法扩展
通过addMethod扩展自定义校验规则：
$.validator.addMethod("phoneCN", function(value) {
return /^1[3-9]\d{9}$/.test(value);
}, "请输入中国大陆手机号");
$("#form").validate({
rules: { mobile: { phoneCN: true } }
});实时校验反馈
结合CSS类实现可视化反馈：
.error { color: red; }
.valid { border: 1px solid green; }$("input").blur(function() {
if(!$(this).val()) {
$(this).addClass("error");
} else {
$(this).removeClass("error").addClass("valid");
}
});异步远程校验
实现服务器端验证：
$.validator.addMethod("checkUser", function(value) {
var result = true;
$.ajax({
url: "/check-user",
data: { username: value },
async: false,
success: function(res) { result = res.available; }
});
return result;
}, "用户名已存在");校验规则示例
常见的内置校验规则包括：
required: 必填字段email: 邮箱格式url: URL格式date: 日期格式number: 数字minlength/maxlength: 长度限制equalTo: 字段匹配
性能优化建议
避免在每次按键时触发校验，使用debounce技术：
var timer;
$('input').on('input', function() {
clearTimeout(timer);
timer = setTimeout(function() {
$(this).valid();
}.bind(this), 500);
});移动端适配考虑触摸事件：
$('input').on('touchstart', function() {
$(this).trigger('focus');
});
