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 相关文章推荐
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
js使用ajax读博客rss示例
May 06 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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中对数据库操作的封装
2006/10/09 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
PHP微信API接口类
2016/08/22 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
html下载本地
2006/06/19 Javascript
页面中js执行顺序
2009/11/09 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
vuex实现简易计数器
2016/10/27 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JavaScript如何操作css
2020/10/24 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python实现随机漫步算法
2018/08/27 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
内勤岗位职责
2015/02/10 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
vue2实现provide inject传递响应式
2021/05/21 Vue.js
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript