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 相关文章推荐
javascript定时变换图片实例代码
Mar 17 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
深入解读Node.js中的koa源码
Jun 17 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
session 加入redis的实现代码
2016/07/15 PHP
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
Node.js 使用命令行工具检查更新
2017/06/08 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
python实现的文件夹清理程序分享
2014/11/22 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
三查三看党性分析材料
2014/02/18 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
学校端午节活动方案
2014/08/23 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript