jquery 验证

关注

原创最新推荐文章于 2026-04-20 10:42:46 发布 555 阅读 AI 写同款· GEO 优化 ›

jQuery验证插件大全：使用强大的jQuery验证插件提升表单验证功能表单验证是Web开发中非常重要的一部分，它用于确保用户输入的数据符合特定的规则和要求。为了简化开发过程并提供更好的用户体验，我们可以使用jQuery验证插件来实现表单验证的功能。本文将介绍一些常用的jQuery验证插件，并提供相应的源代码示例。通过使用这些强大的jQuery验证插件，我们可以轻松地实现各种表单验证需求。无论是简单的必填字段验证还是复杂的自定义验证规则，这些插件都提供了丰富的功能和选项，可以满足我们的需求。该插件会自动检测表单的提交事件，并在提交前进行验证。在上面的代码中，我们使用了。阅读详情

test()方法判断字符串中是否匹配到正则表达式内容，返回的是boolean值 ( true / false )

// 验证中文名称
function isChinaName(name) {
 var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
 return pattern.test(name);
}

// 验证手机号
function isPhoneNo(phone) { 
 var pattern = /^1[34578]\d{9}$/; 
 return pattern.test(phone); 
}

// 验证身份证 
function isCardNo(card) { 
 var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
 return pattern.test(card); 
} 

// 验证函数
function formValidate() {
 var str = '';

 // 判断名称
 if($.trim($('#name').val()).length == 0) {
  str += '名称没有输入\n';
  $('#name').focus();
 } else {
  if(isChinaName($.trim($('#name').val())) == false) {
   str += '名称不合法\n';
   $('#name').focus();
  }
 }

 // 判断手机号码
 if ($.trim($('#phone').val()).length == 0) { 
  str += '手机号没有输入\n';
  $('#phone').focus();
 } else {
  if(isPhoneNo($.trim($('#phone').val()) == false)) {
   str += '手机号码不正确\n';
   $('#phone').focus();
  }
 }

 // 验证身份证
 if($.trim($('#identity').val()).length == 0) { 
  str += '身份证号码没有输入\n';
  $('#identity').focus();
 } else {
  if(isCardNo($.trim($('#identity').val())) == false) {
   str += '身份证号不正确；\n';
   $('#identity').focus();
  }
 }

 // 验证地址
 if($.trim($('#address').val()).length == 0) { 
  str += '地址没有输入\n';
  $('#address').focus();
 }

 // 如果没有错误则提交
 if(str != '') {
  alert(str);
  return false;
 } else {
  $('.auth-form').submit();
 }
}

$('#submit').on('click', function() {
 formValidate();
});

收录于