bootstrap-validator基本使用（自定义验证身份证号和手机号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="apple-touch-icon" href="img/favicon.ico">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet" />
</head>
<body>
<form class="" autocomplete="off">
<div class="form-group">
<label>姓名</label>
<input type="text" class="form-control" name="name" />
</div>
<div class="form-group">
<label>身份证号</label>
<input type="text" class="form-control" name="identity" />
</div>
<div class="form-group">
<label>手机号</label>
<input type="text" class="form-control" name="tel" />
</div>
<div class="form-group">
<button type="button" id="submit" name="submit" class="btn btn-primary">提交</button>
<button type="button" id="reset" name="reset" class="btn btn-primary">重置</button>
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script>
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 4,
message: '用户名长度必须大于4个字符'
},
}
},
identity: {
validators: {
notEmpty: {
message: '身份证号码不能为空'
},
callback: {
message: '身份证号码格式错误',
callback: function (value, validator) {
if (!value) {
return true
} else if (isCardNo(value)) {
return true;
} else {
return false;
}
}
}
}
},
tel: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '手机号格式错误'
}
}
}
}
});
var bootstrapValidator = $('form').data('bootstrapValidator');
// 提交时验证
$('#submit').on('click', function () {
bootstrapValidator.validate();
if (bootstrapValidator.isValid()) {
//表单提交的方法、比如ajax提交
alert('success');
}
})
// 重置表单
$('#reset').on('click', function () {
bootstrapValidator.resetForm();
$('input').val('')
})
// 验证身份证号
function isCardNo(card) {
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (reg.test(card) === false) {
return false
} else {
return true
}
}
// 验证手机号
function checkMobile(str) {
let re = /^1\d{10}$/
if (re.test(str)) {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
bootstrap-validator基本使用（自定义验证身份证号和手机号）的更多相关文章
- js验证真实姓名与身份证号，手机号
最近的项目中用的需要调用实名认证的接口,实名认证接口价格相比短信而言高了不是几分钱,所以说调用实名认证的条件就要严格把关,因此用到js验证真实姓名与js验证身份证号. 进入正题 1.js验证真实姓名 ...
- JavaScript验证身份证号
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncodin ...
- javascript实现验证身份证号的有效性并提示
javascript实现验证身份证号的有效性并提示 function nunber(allowancePersonValue){ if(allowancePersonValue=="身份证号 ...
- js验证身份证号，超准确
js验证身份证号,超准确 看程序前先来了解下身份证号的构成:身份证号分为两种,旧的为15位,新的为18位.身份证15位编码规则:dddddd yymmdd xx p 其中 dddddd:地区码 ...
- js正则表达式验证身份证号和密码
//验证身份证号只能输入15位或者18位的身份证号 /^\d{14}[X|\d]{1}$|^\d{18}$/ig //验证只能输入字母和数字组合6到16位 /^[a-z][a-z0-9]{6,16}$ ...
- Android 使用正则表达式验证身份证号是否符合规则
我国当前的身份证号分为三种: 一.15位身份证号 二.18位身份证号(前17位位数字,最后一位为字母x) 三.18为身份证号(18位都是数字) 具体验证请参考下面代码: /** * 验证身份证号是否符 ...
- js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）
js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...
- js实现填写身份证号、手机号、准考证号等信息自动空格的效果
咱们做网站的,用户体验那是相当重要的,比如12306抢票需要填写身份证,如果不空格,密密麻麻的给我一种很压抑的感觉,而且也不容易核对信息是否填写正确,所以我就写了一个利用Js实现填写身份证号.手机号. ...
- 锋利的js之验证身份证号
我们在做互联网网站时,注册个人资料时,经常要用到身份证号,我们需要对身份证进验证,不然别人随便输个号码就通过,让你感觉这个网站做得很shit. 身份证号是有规则的. 结构和形式 1．号码的结构 公民 ...
随机推荐
- 联想ThinkPadE455实现FN禁用（F1-F12标准功能与特殊功能切换）
系统:Win7 64 位 机型:联想ThinkPadE455笔记本 方法一:键盘Fn热键切换功能(亲测可用) Fn+Esc FnLk 组合键方法启用或禁用Fn锁定功能 具体说明(这个逻辑 ...
- MySQL: Building the best INDEX for a given SELECT
Table of Contents The ProblemAlgorithmDigressionFirst, some examplesAlgorithm, Step 1 (WHERE "c ...
- 转：SQL 关于apply的两种形式cross apply 和 outer apply
原文地址:http://www.cnblogs.com/Leo_wl/archive/2013/04/02/2997012.html SQL 关于apply的两种形式cross apply 和 out ...
- linux内核完全剖析——基于0.12内核-笔记（1）-CPU 数据通信
CPU数据通信总线 CPU通过地址线.数据线.控制信号组成的本地总线(或称为内部总线)与系统其它部分进行数据通信. 地址总线 地址总线用于内存或I/O设备的地址,即指明需要读/写数据的具体位置. 数据 ...
- 了解注解及java提供的几个基本注解
先通过@SuppreessWarnings的应用让大家直观地了解注解: 通过System.runFinalizersOnExit(true);的编译器警告引出 @SuppressW ...
- hyper-v NAT网络
宿主机:windows 2008 R2 企业版 hyper-V配置静态IP地址 https://jingyan.baidu.com/article/925f8cb8ae1ee2c0dde05632.h ...
- HTML5 学习总结（三）——本地存储（localStorage、sessionStorage、WebSqlDataBase、IndexedDB）
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- Windows Server 2008远程桌面端口更改方法
win2008远程桌面端口默认是用的是3389端口,但是由于安全考虑,经常我们安装好系统后一般都会考虑把原来的3389端口更改为另外的端口.本文以改为端口为25608商品为例,讲解一下具体操作过程. ...
- MySql详解（七）
MySql详解(七) MySql视图 一.含义 mysql5.1版本出现的新特性,本身是一个虚拟表,它的数据来自于表,通过执行时动态生成. 好处: 1.简化sql语句 2.提高了sql的重用性 3.保 ...
- Tengine 2.1.2 (nginx/1.6.2)安装配置，淘宝 Web 服务器
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...