bootstrapValidator表单验证：
github下载：https://github.com/pengpengbhne/BootstrapValidator
引入js等
6 <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
7 <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
11
12 <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>
13 <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
14 <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>html:
<a class="btn btn-base btn-xm-base" data-toggle="modal" data-target="#myModal2">
<span class="glyphicon glyphicon-plus btn-base-padding"></span>大按钮</a><!--模态框2 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" onclick="modelClose2()" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">添加用户</h4>
</div>
<div class="row modal-body">
<!-- form: -->
<section>
<div class="col-md-12">
<form id="defaultForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">用户名：</label>
<div class="col-md-8">
<input type="text" class="form-control" name="username" placeholder="用户名" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">角色：</label>
<div class="col-md-8">
<select class="selectpicker" title="-----请选择-----"
data-style="select-info"
data-width="370px"
name="roles"
id="roles">
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">邮箱：</label>
<div class="col-md-8">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">密码：</label>
<div class="col-md-8">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">确认密码：</label>
<div class="col-md-8">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">手机号：</label>
<div class="col-md-8">
<input type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">描述：</label>
<div class="col-md-8">
<textarea class="form-control" name="dis" rows="10" ></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">文件大小和类型</label>
<div class="col-md-8">
<input type="file" class="form-control" name="secondFile" />
<span class="help-block">弃用</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">性别：</label>
<div class="col-md-8">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> 男
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> 女
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">年龄：</label>
<div class="col-md-8 ">
<input type="text" class="form-control" name="ages" />
</div>
</div>
<div class="form-group ">
<label for="name" class="col-md-3 control-label">生日：</label>
<div class="input-group col-md-8 date form_date " id="birthday_day">
<input class=" input-group form-control remove-border " size="20" type="text" name="birthday" value="" readonly id="date_input">
<span class="input-group-addon date-remove"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">语言：</label>
<div class="col-md-5">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="english" /> English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="french" /> French
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="german" /> German
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="russian" /> Russian
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-info" id="validateBtn">验证提交</button>
<button type="button" class="btn btn-info" id="resetBtn">重置表单</button>
</div>
</div>
</form>
</div>
</section>
<!-- :form -->
</div>
</div>
</div>
</div><!-- 模态框结束 -->表单验证js:
几乎涵盖所有的常用的验证：
/*
* 参考bootstrapValidator
* 表单验证*/
$(function() {
$('#defaultForm').bootstrapValidator({
fields: {
username: {
validators: {
notEmpty: {
message: '用户名不能为空！'
},
stringLength: {
min: 6,
max: 20,
message: '用户名长度为6-20'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能包括字符、数字、下划线'
},
/*远程验证
* remote: {
type: 'POST',
url: '#',
message: '用户名不能重复'
},*/
}
},
roles: {
validators: {
notEmpty: {
message: 'The country is required and can\'t be empty'
}
}
},
email: {
validators: {
emailAddress: {
message: '请填入正确的email地址！'
}
}
},
password: {
validators: {
notEmpty: {
message: '密码不能为空'
},
different: {
field: 'username',
message: '密码不能和用户名相同！'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: '确认密码不能为空！'
},
identical: {
field: 'password',
message: '请与密码保持一致！'
}
}
},
phoneNumber: {
validators: {
notEmpty: {
message: '手机号码不能为空'
},
/*stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},*/
regexp: {
regexp: /^1[34578]\d{9}$/,
message: '请输入11位正确的手机号码'
}
}
},
secondFile: {
validators: {
file: {
extension: 'pdf',
type: 'application/pdf',
minSize: 1024*1024,
message: '请选择一个大小小于 1M的pdf文件'
}
}
},
dis:{
validators:{
notEmpty: {
message: '描述不能为空！'
},
stringLength:{
max:100,
message:'最大长度为100'
}
}
},
birthday: {
validators: {
notEmpty: {
message: '日期不能为空！'
},
date: {
format: 'yyyy-mm-dd',
message: '时间日期不对'
}
}
},
gender: {
validators: {
notEmpty: {
message: '性别必填！'
}
}
},ages: {
validators: {
lessThan: {
value: 100,
inclusive: true,//设置为true表示可以等于
message: '年龄最大为100'
},
greaterThan: {
value: 1,
inclusive: true,
message: '年龄最小为 1'
}
}
},
'languages[]': {
validators: {
notEmpty: {
message: '语言至少选择2个'
},
choice: {
min: 2,
max: 4,
message: '语言需要选择2-4个'
}
}
},
}
});
// Validate the form manually
$('#validateBtn').click(function() {
$('#defaultForm').bootstrapValidator('validate');
});
$('#resetBtn').click(function() {
$('#defaultForm').data('bootstrapValidator').resetForm(true);
});
});
效果：
1、重置某一单一验证字段验证规则
$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );
2、重置表单所有验证规则
$(formName).data("bootstrapValidator").resetForm();
3、手动触发表单验证
//触发全部验证
$(formName).data(“bootstrapValidator”).validate();
//触发指定字段的验证
$(formName).data(“bootstrapValidator”).validateField('fieldName');
4、获取当前表单验证状态
// flag = true/false
var flag = $(formName).data(“bootstrapValidator”).isValid();
5、根据指定字段名称获取验证对象
// element = jq对象 / null
var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');