做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。
来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js文件。
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/bootstrapValidator.min.js"></script>
<link href="css/bootstrapValidator.min.css" rel="stylesheet" />
我们知道,既然是表单验证,那么我们在html页面就必须要有一个Form,并且我们知道Form里面取元素都是通过name属性去取值的,所以,表单里面的元素都要有一个name的属性值。
<form class="form-inline">
<div class="col-sm-12">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">收货人</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" name='name' data-tree='name' maxlength='6' />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">手机号码</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone" name='phone' data-tree='phone' maxlength='11' />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">固定电话</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="telephone" name='telephone' data-tree='telephone' maxlength='15' />
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">邮编</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="postCode" name='postCode' maxlength='6' data-tree='postCode' />
</div>
</div>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary sureAddress"> 保存</button>
</div>
</form>
有了表单元素之后,就是我们的js初始化了。
$('#c_compile').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: '请填写您的姓名'
}
}
},
phone: {
validators: {
notEmpty: {
message: '请填写您的手机号码',
},
regexp: {
regexp: /(^1[3-9]\d{9}$)/,
message: '请输入正确的手机号'
}
}
},
telephone: {
validators: {
notEmpty: {
message: '请填写您的固定电话',
},
regexp: {
regexp: /^((0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/,
message: '请输入正确的固定电话'
}
}
},
postCode: {
validators: {
notEmpty: {
message: '请填写您的邮编',
},
regexp: {
regexp: /^[0-9][0-9]{5}$/,
message: '请输入正确的邮编'
}
}
},
}
});
效果如图:
验证通过: