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.validate表单验证插件使用详解

    jquery.validate表单验证插件使用详解

    这篇文章主要为大家详细介绍了jquery.validate表单验证插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • EasyUI中实现form表单提交的示例分享

    EasyUI中实现form表单提交的示例分享

    这里给大家分享的是一段使用EasyUI中实现form表单提交的方法的核心代码,小伙伴们根据自己的需求补全form部分吧,希望大家能够喜欢。
    2015-03-03
  • 网页前端优化之滚动延时加载图片示例

    网页前端优化之滚动延时加载图片示例

    做web开发的朋友都应该掌握前端优化这个技巧,其中一个就是滚动延时加载。这个技巧应用在了很多地方,比如新浪微博网页版。以下就为大家详细介绍,需要的朋友可以参考下
    2013-07-07
  • jQuery中removeData()方法用法实例

    jQuery中removeData()方法用法实例

    这篇文章主要介绍了jQuery中removeData()方法用法,实例形式分析了removeData()方法移除匹配元素指定数据的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • StringTemplate遇见jQuery冲突的解决方法

    StringTemplate遇见jQuery冲突的解决方法

    最近在做一个流程引擎,现着手于自定义模板的处理。设计在模板中所有的数据都将与字段对应,采用xml结构序列化作为流程持久化机制。
    2011-09-09
  • jquery.ui.progressbar 中文文档

    jquery.ui.progressbar 中文文档

    这个是最早做出来的, 现在也改成xml格式了, 呵呵.
    2009-11-11
  • jquery封装的对话框简单实现

    jquery封装的对话框简单实现

    本文为大家详细介绍下使用jquery简单实现封装的对话框,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • jQuery实现平滑滚动页面到指定锚点链接的方法

    jQuery实现平滑滚动页面到指定锚点链接的方法

    这篇文章主要介绍了jQuery实现平滑滚动页面到指定锚点链接的方法,涉及jquery鼠标事件及页面滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • jquery获得同源iframe内body下标签的值的方法

    jquery获得同源iframe内body下标签的值的方法

    这篇文章主要介绍了jquery获得同源iframe内body下标签的值的方法,很简单,很实用,需要的朋友可以参考下
    2014-09-09
  • jQuery实现的简单歌词滚动功能示例

    jQuery实现的简单歌词滚动功能示例

    这篇文章主要介绍了jQuery实现的简单歌词滚动功能,结合实例形式分析了基于jQuery插件scroll.js实现滚动功能相关操作技巧,涉及jQuery结合时间函数动态操作页面元素相关实现方法,需要的朋友可以参考下
    2019-01-01

最新评论