| |
<!DOCTYPE html> |
| |
<html> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>邓</title> |
| |
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> |
| |
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/> |
| |
|
| |
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script> |
| |
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> |
| |
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script> |
| |
</head> |
| |
<body> |
| |
<div class="container"> |
| |
<div class="row"> |
| |
|
| |
<section> |
| |
<div class="page-header"> |
| |
<h1>Bootstrap Validate 标题</h1> |
| |
</div> |
| |
|
| |
<div class="col-lg-8 col-lg-offset-2"> |
| |
<form id="defaultForm" method="post" action="target.php" class="form-horizontal"> |
| |
<fieldset> |
| |
<legend>账号验证 + 选择验证①：</legend> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">账号</label> |
| |
<div class="col-lg-5"> |
| |
<input type="text" class="form-control" name="username" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">国家</label> |
| |
<div class="col-lg-5"> |
| |
<select class="form-control" name="country"> |
| |
<option value="">-- 请选择一项 --</option> |
| |
<option value="fr">France</option> |
| |
<option value="de">Germany</option> |
| |
<option value="it">Italy</option> |
| |
<option value="jp">Japan</option> |
| |
<option value="ru">Russia</option> |
| |
<option value="gb">United Kingdom</option> |
| |
<option value="us">United State</option> |
| |
</select> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<div class="col-lg-5 col-lg-offset-3"> |
| |
<div class="checkbox"> |
| |
<input type="checkbox" name="acceptTerms" /> |
| |
√是否接受本公司协议 |
| |
</div> |
| |
</div> |
| |
</div> |
| |
</fieldset> |
| |
|
| |
<fieldset> |
| |
<legend>验证规则②：</legend> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">Email 邮箱</label> |
| |
<div class="col-lg-5"> |
| |
<input type="text" class="form-control" name="email" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">网址链接</label> |
| |
<div class="col-lg-5"> |
| |
<input type="text" class="form-control" name="website" placeholder="http://" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">手机号</label> |
| |
<div class="col-lg-5"> |
| |
<input type="text" class="form-control" name="phoneNumber" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">颜色</label> |
| |
<div class="col-lg-3"> |
| |
<input type="text" class="form-control" name="color" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">US zip code邮政编码</label> |
| |
<div class="col-lg-3"> |
| |
<input type="text" class="form-control" name="zipCode" /> |
| |
</div> |
| |
</div> |
| |
</fieldset> |
| |
|
| |
<fieldset> |
| |
<legend>密码验证③：</legend> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">密码</label> |
| |
<div class="col-lg-5"> |
| |
<input type="password" class="form-control" name="password" /> |
| |
</div> |
| |
</div> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">确认密码</label> |
| |
<div class="col-lg-5"> |
| |
<input type="password" class="form-control" name="confirmPassword" /> |
| |
</div> |
| |
</div> |
| |
</fieldset> |
| |
|
| |
<fieldset> |
| |
<legend>其他验证④：</legend> |
| |
|
| |
<div class="form-group"> |
| |
<label class="col-lg-3 control-label">年龄</label> |
| |
<div class="col-lg-3"> |
| |
<input type="text" class="form-control" name="ages" /> |
| |
</div> |
| |
</div> |
| |
</fieldset> |
| |
|
| |
<div class="form-group"> |
| |
<div class="col-lg-9 col-lg-offset-3"> |
| |
<button type="submit" class="btn btn-primary">Submit</button> |
| |
</div> |
| |
</div> |
| |
</form> |
| |
</div> |
| |
</section> |
| |
|
| |
</div> |
| |
</div> |
| |
|
| |
<script type="text/javascript"> |
| |
$(document).ready(function() { |
| |
$('#defaultForm').bootstrapValidator({ |
| |
fields: { |
| |
// 账号验证 |
| |
// username: { //字段名称：name |
| |
// validators: { //验证规则如下： |
| |
// notEmpty: { //非空验证 |
| |
// message: '请输入username2' |
| |
// }, |
| |
// stringLength: { //字符串长度验证 |
| |
// min: 3, |
| |
// max: 10, |
| |
// message: '请输入3~10位之间的字符' |
| |
// }, |
| |
// regexp: { //输入的类型验证 |
| |
// // regexp: /^[a-zA-Z0-9_.]+$/, |
| |
// regexp: /^[0-9_.]+$/, |
| |
// message: '只能输入数字' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//是否选择一项： |
| |
// country: { |
| |
// validators: { //验证规则： |
| |
// notEmpty: { //非空验证 |
| |
// message: '请选择一项' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//是否勾选 √： |
| |
// acceptTerms: { |
| |
// validators: { |
| |
// notEmpty: { |
| |
// message: '此项必填' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//邮箱 格式验证： |
| |
// email: { |
| |
// validators: { |
| |
// notEmpty: { |
| |
// message: '此项必填' |
| |
// }, |
| |
// emailAddress: { |
| |
// message: '请输入正确的邮箱格式' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//网站地址 验证： |
| |
// website: { |
| |
// validators: { |
| |
// uri: { |
| |
// message: '请输入正确的URL地址eg：http://www.baidu.com' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
|
| |
//手机号 验证： |
| |
// phoneNumber: { |
| |
// validators: { |
| |
// digits: { |
| |
// message: '请输入正确的手机号' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//颜色格式 |
| |
// color: { |
| |
// validators: { |
| |
// hexColor: { |
| |
// message: '请输入正确的颜色eg:#9bf' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//邮编格式 |
| |
// zipCode: { |
| |
// validators: { |
| |
// zipCode: { |
| |
// country: 'US', |
| |
// message: '输入的邮政编码' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
//密码验证 |
| |
// password: { |
| |
// validators: { |
| |
// notEmpty: { |
| |
// message: '此项必填' |
| |
// }, |
| |
// identical: { |
| |
// field: 'confirmPassword', //字段名name |
| |
// message: '两次密码输入的不一致1' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
|
| |
//是否输入的一致： |
| |
// confirmPassword: { |
| |
// validators: { |
| |
// notEmpty: { |
| |
// message: '此项必填' |
| |
// }, |
| |
// identical: { |
| |
// field: 'password', |
| |
// message: '两次密码输入的不一致2' |
| |
// } |
| |
// } |
| |
// }, |
| |
|
| |
|
| |
|
| |
//年龄 验证： |
| |
ages: { |
| |
validators: { |
| |
lessThan: { |
| |
value: 100, |
| |
inclusive: true, |
| |
message: '不能大于100岁' |
| |
}, |
| |
greaterThan: { |
| |
value: 10, |
| |
inclusive: false, |
| |
message: '不能小于10岁' |
| |
} |
| |
} |
| |
} |
| |
//结束验证 |
| |
|
| |
} |
| |
}); |
| |
}); |
| |
</script> |
| |
</body> |
| |
</html> |
| |
|