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 相关文章推荐
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php object转数组示例
2014/01/15 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP7 新增功能
2021/03/09 PHP
学习ExtJS form布局
2009/10/08 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
用js实现放大镜效果
2020/10/28 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
Python页面加载的等待方式总结
2021/02/28 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
小学生暑假感言
2014/02/06 职场文书
机电一体化专业求职信
2014/07/22 职场文书
致运动员加油稿
2015/07/21 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
Python爬取英雄联盟MSI直播间弹幕并生成词云图
2021/06/01 Python
python图片灰度化处理的几种方法
2021/06/23 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers