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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
jquery插件validate验证的小例子
May 08 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
Angular 应用技巧总结
Sep 14 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
文本加密解密
2006/06/23 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python在不同层级目录import模块的方法
2016/01/31 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
中介业务员岗位职责
2014/04/09 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
卡特教练观后感
2015/06/08 职场文书
医院见习总结
2015/06/24 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers