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


Posted in Javascript onDecember 31, 2015

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

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程序设计有所帮助。

Javascript 相关文章推荐
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
简单谈谈JavaScript的同步与异步
Dec 31 #Javascript
jQuery实现简单的图片查看器
Sep 11 #Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 #Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 #Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 #Javascript
You might like
谈谈 PHP7新增功能
2015/12/16 PHP
php 基础函数
2017/02/10 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
JavaScript日历实现代码
2010/09/12 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
浅谈javascript的调试
2015/01/28 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue3.x源码调试的实现方法
2019/10/13 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
日化店促销方案
2014/03/26 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
施工员岗位职责范本
2015/04/11 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
投资申请报告
2015/05/19 职场文书
创业计划书之香辣虾火锅
2019/09/23 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
java代码实现空间切割
2022/01/18 Java/Android
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android