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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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
php session和cookie使用说明
2010/04/07 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python用户管理系统
2018/03/13 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python中super函数用法实例分析
2019/03/18 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
Python print不能立即打印的解决方式
2020/02/19 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
物流合作计划书
2014/01/10 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
安全隐患整改报告
2014/11/06 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle