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 EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
js获取iframe中的window对象的实现方法
May 20 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
javascript绘制简单钟表效果
Apr 07 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
给初学PHP的5个入手程序
2006/11/23 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
php重定向的三种方法分享
2012/02/22 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
YUV转为jpg图像的实现
2019/12/09 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
安卓程序员求职信
2014/02/28 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
Python时间操作之pytz模块使用详解
2022/06/14 Python