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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
jQuery 名称冲突的解决方法
Apr 08 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Bootstrap布局方式详解
May 27 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
es6函数之rest参数用法实例分析
Apr 18 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
建立动态的WML站点(一)
2006/10/09 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jQuery实现跨域
2015/02/03 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jQuery中页面返回顶部的方法总结
2016/12/30 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python实现异步回调机制代码分享
2014/01/10 Python
python的类变量和成员变量用法实例教程
2014/08/25 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
浅谈Python基础—判断和循环
2019/03/22 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
工厂仓管员岗位职责
2014/01/01 职场文书
党支部书记先进事迹
2014/01/17 职场文书
早读迟到检讨书
2014/01/24 职场文书
小学生读书笔记
2015/07/01 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
Python音乐爬虫完美绕过反爬
2021/08/30 Python