jquery正则验证
jQuery 正则验证实现方法
使用 jQuery 结合正则表达式进行表单验证是一种常见的前端验证方式。以下是几种典型场景的实现方法：
基本正则验证示例
$('#inputField').on('blur', function() {
var value = $(this).val();
var regex = /^[a-zA-Z0-9]+$/; // 只允许字母和数字
if (!regex.test(value)) {
alert('输入内容不符合要求');
}
});常用验证规则集合
// 邮箱验证
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
// 手机号验证（中国大陆）
var phoneRegex = /^1[3-9]\d{9}$/;
// 身份证验证（简易版）
var idCardRegex = /^\d{17}[\dXx]$/;表单提交时批量验证
$('#submitBtn').click(function(e) {
e.preventDefault();
var isValid = true;
$('.validate').each(function() {
var pattern = $(this).data('pattern');
var regex = new RegExp(pattern);
if (!regex.test($(this).val())) {
$(this).addClass('error');
isValid = false;
} else {
$(this).removeClass('error');
}
});
if (isValid) {
$('#myForm').submit();
}
});动态提示错误信息
$('.validate-input').on('input', function() {
var pattern = $(this).data('pattern');
var message = $(this).data('message');
var regex = new RegExp(pattern);
if (!regex.test($(this).val())) {
$(this).next('.error-message').text(message).show();
} else {
$(this).next('.error-message').hide();
}
});预定义验证方法
$.validator.addMethod("strongPassword", function(value) {
return /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value);
}, "密码必须包含大小写字母和数字，且长度不小于8位");注意事项
- 前端验证不能替代后端验证，应始终在后端进行二次验证
- 复杂的正则表达式会影响性能，必要时可拆分为多个简单验证
- 对于国际化的应用，需要考虑不同地区的验证规则差异
- 使用事件委托可以提高性能，特别是对动态生成的元素
以上方法可以根据实际需求组合使用，构建灵活的表单验证系统。
