<!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基本使用（自定義驗證身份證號和手機號）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。