在引入jQuery和Bootstrap的前提下引入bootstrapvalidator文件 ,我用的Bootcdn。
<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
HTML代码:
<form id="addForm" method="post" class="form-horizontal" action="">
<fieldset>
<legend style="text-align: left;">基础资料</legend>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="name">姓名</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="name" type="text" placeholder=""/>
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="sex">性别</label>
<div class="col-sm-9">
<select id="sex" name="sex" class="form-control">
<option>男</option>
<option>女</option>
</select>
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="birthday">出生年月</label>
<div class="col-sm-9">
<input type="text" id="birthday" name="birthday" class="form-control datepicker" placeholder="请选择日期" />
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="nation">民族</label>
<div class="col-sm-9">
<input class="form-control" id="nation" name="nation" type="text" placeholder=""/>
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="nativePlace">籍贯</label>
<div class="col-sm-9">
<input class="form-control" id="nativePlace" name="nativePlace" type="text" placeholder=""/>
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="birthplace">出生地</label>
<div class="col-sm-9">
<input class="form-control" id="birthplace" name="birthplace" type="text" placeholder=""/>
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="joinPartyDate">入党时间</label>
<div class="col-sm-9">
<input type="text" id="joinPartyDate" name="joinPartyDate" class="form-control datepicker" placeholder="请选择日期" />
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="workedDate">参加工作时间</label>
<div class="col-sm-9">
<input type="text" id="workedDate" name="workedDate" class="form-control datepicker" placeholder="请选择日期" />
</div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-3 control-label" for="health">健康状况</label>
<div class="col-sm-9">
<input class="form-control" id="health" name="health" type="text" placeholder=""/>
</div>
</div>
</fieldset>
<fieldset>
<div class="form-group col-sm-6">
<label class="col-sm-2 control-label" for="technicalPosition">专业技术之职务</label>
<div class="col-sm-10">
<input type="text" id="technicalPosition" name="technicalPosition" class="form-control" placeholder="" />
</div>
</div>
<div class="form-group col-sm-6">
<label class="col-sm-2 control-label" for="major">熟悉专业何种特长</label>
<div class="col-sm-10">
<input type="text" id="major" name="major" class="form-control" placeholder="" />
</div>
</div>
</fieldset>
</form>
一个<fieldset>代表一行,bootstrap采用栅格布局,所以class为col-sm-6代表占一行6份,col-sm-1则是代表占一行1份,一行总共是12份。一个<div class="form-group">代表一个字段,因为在bootstrapvalidator验证过后是通过添加div class来显示效果的。
js:
//增加页面表单验证规则
$(document).ready(function () {
$("#addForm").bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
message: '姓名称验证失败',
validators: {
notEmpty: {
message: '姓名不能为空'
},
stringLength: {
max: 10,
message: '姓名长度不能超过10位'
}
}
},
birthday: {
message: '出生年月验证失败',
validators: {
stringLength: {
max: 10,
message: '出生年月长度不能超过10位'
}
}
},
nation: {
message: '民族验证失败',
validators: {
stringLength: {
max: 10,
message: '民族长度不能超过10位'
}
}
},
//其余字段省略。。。。。。。
}
});
validators验证书写规则:
validators: {
notEmpty: {
message: '文本框必须输入'
},
stringLength: {//检测长度
min: 5,
max: 10,
message: '长度必须在5-10之间'
},
regexp: {//正则验证
regexp: /^[a-z]/,
message: ''
},
remote: {//将内容发送至指定页面验证,返回验证结果,比如查询用户名是否存在
url: '指定页面',
message: ''
},
different: {//与指定文本框比较内容相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
emailAddress: {//验证email地址
message: '不是正确的email地址'
},
identical: {//与指定控件内容比较是否相同,比如两次密码不一致
field: 'confirmPassword',//指定控件name
message: '输入的内容不一致'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件选择的数量
min: 2,
max: 4,
message: '必须选择2-4个选项'
}
}
提交验证:
//提交表单
$("#btn_save").click(function () {
$('#addForm').data("bootstrapValidator").validate();
var isValid = $('#addForm').data("bootstrapValidator").isValid();
if(isValid) {
// 验证成功、上传表单数据。。。
} else {
alert("验证失败,请检查字段")
return;
}
})
参考:https://blog.csdn.net/jewely/article/details/77810472
~不喜欢篮球的摄影师不是一个好程序员~