jquery正则表达式验证(手机号、身份证号、中文名称)

 更新时间:2015年12月31日 10:19:53   作者:天空还下着雪  
这篇文章主要介绍了jquery正则表达式验证,实现手机号、身份证号、中文名称验证,感兴趣的小伙伴们可以参考一下

本文实例需要验证的内容:中文姓名、手机号、身份证和地址,验证方法分享给大家供大家参考,具体内容如下

HTML(表单):

<form action="">
 <div class="form-group">
  <label>姓名:</label>
  <input id="name" type="text">
 </div>
 <div class="form-group">
  <label>手机号:</label>
  <input id="phone" type="text">
 </div>
 <div class="form-group">
  <label>身份证:</label>
  <input id="identity" type="text">
 </div>
 <div class="form-group">
  <label class="label-textarea">邮寄地址:</label>
  <textarea id="address"></textarea>
 </div>
 <p class="tip">请填写实名认证信息,以便领奖资料一经提交无法修改,请慎重填写!</p>
 <div class="btn-group">
  <button class="btn btn-md btn-purple" type="reset">取消</button>
  <button class="btn btn-md btn-purple ml-20" id="submit" type="button">提交</button>
 </div>
</form>

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();
});

希望本文所述对大家学习jquery程序设计有所帮助。

相关文章

  • jQuery查找dom的几种方法效率详解

    jQuery查找dom的几种方法效率详解

    这篇文章主要记录了在近期开发中遇到的jQuery dom基本查找方法,然后将各种方法性能做了一个比较,目的是希望自己在以后dom元素查找时,使用最优的方案。文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件。如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • jquery实现网页左侧导航菜单栏

    jquery实现网页左侧导航菜单栏

    这篇文章主要为大家详细介绍了jquery实现网页左侧导航菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解

    这篇文章主要介绍了jquery 键盘事件的使用方法详解的相关资料,主要介绍keydown()、keyup()、keypress()等三种方法,需要的朋友可以参考下
    2017-09-09
  • 使用easyui从servlet传递json数据到前端页面的两种方法

    使用easyui从servlet传递json数据到前端页面的两种方法

    这篇文章主要介绍了用easyui从servlet传递json数据到前端页面的两种方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Jquery创建层显示标题和内容且随鼠标移动而移动

    Jquery创建层显示标题和内容且随鼠标移动而移动

    本文为大家介绍下使用Jquery创建一个层显示标题的内容且随鼠标移动,具体的实现如下
    2014-01-01
  • 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    如何解决谷歌浏览器下jquery无法获取图片的尺寸

    本章节介绍一下在谷歌浏览器下利用jquery无法获取图片尺寸的现象,而在IE和火狐浏览器下能够正常获得,当然也不是任何时候都无法获取图片尺寸,下面给大家介绍遇到此问题该如何解决
    2015-09-09
  • iframe异步加载实现点击左边菜单加载右边内容实例讲解

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    iframe异步加载想必很多朋友对你都不会陌生,接下来将实现这样一个功能左边菜单不能刷新的情况下,异步加载右边的内容页面,感兴趣的你可以参考下本文或许对你有所帮助
    2013-03-03
  • jquery按回车键实现表单提交的简单实例

    jquery按回车键实现表单提交的简单实例

    下面小编就为大家带来一篇jquery按回车键实现表单提交的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jQuery插件bxSlider实现响应式焦点图

    jQuery插件bxSlider实现响应式焦点图

    bxSlider特性1.充分响应各种设备,适应各种屏幕;2.支持多种滑动模式,水平、垂直以及淡入淡出效果;3.支持图片、视频以及任意html内容;4.支持触摸滑动;5.支持Firefox,Chrome,Safari,iOS,Android,IE7+,下面我们就来详细探讨下吧。
    2015-04-04

最新评论