因为最近开发的项目前端使用了bootstrap框架，在前台数据校验的时候就考虑了bootstrapvalidator，整体效果不错，基本上可以快速的实现校验功能。
效果图
前台校验.png
后台数据校验.png
前端校验
- 导入所需css和js
<link href="static/assets/bootstrapvalidator/css/bootstrapValidator.css" rel="stylesheet" type="text/css">
<script src="static/assets/bootstrapvalidator/js/bootstrapValidator.js"></script>
所需资源可以去官方下载，嫌麻烦的话，可以直接从我提供的百度云盘进行下载：链接：https://pan.baidu.com/s/1mjhovjy 密码：atwy
- 进行前端校验，实现代码如下，仅供参考。
$("#loginForm").bootstrapValidator({
submitHandler: function (valiadtor, loginForm, submitButton) {
valiadtor.defaultSubmit();
},
fields:{
username:{
validators:{
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
/*长度提示*/
min: 4,
max: 30,
message: '用户名长度必须在4到30之间'
}
}
},
password:{
validators:{
notEmpty: {
message: '密码不能为空'
},
stringLength: {
/*长度提示*/
min: 4,
max: 30,
message: '密码长度必须在4到30之间'
}
}
}
}
});
});
后台数据校验
这里基于Thymeleaf，点击确认的时候会将一个表单数据整体提交给后台controller，进行数据处理之后，将数据存放到modelmap里面返回给前台，前台根据具体的返回数据做出对应的校验展示。
后台代码
mybatis和spring的整合，先进行service层的实现：根据登录名进行查询，能查询到则返回对象的详细信息，否则返回null。
@Service
public class OperatorSereviceImpl implements OperatorSerevice{
@Autowired
private OperatorMapper operatorMapper;
/**
* 查询操作员详细信息
* @param op 传入的操作员查询信息
* @return
*/
@Override
public Operator queryOperator(Operator op) {
//通过username查询操作员
String username = op.getUsername();
OperatorExample example = new OperatorExample();
example.createCriteria().andUsernameEqualTo(username);
List<Operator> operatorList = operatorMapper.selectByExample(example);
if(operatorList!=null && operatorList.size()>0){
return operatorList.get(0);
}else{
return null;
}
}
}
关于注解的相关知识暂不多说。之后，则需要在controller层进行逻辑的处理，这里我们约定错误返回数据分为错误码和错误信息两个属性。其中错误码为1表示用户不存在，错误码为2表示密码错误。
@RequestMapping("/main")
public String main(ModelMap model, HttpServletRequest request, Operator op){
Operator searchOP = operatorSerevice.queryOperator(op);
if(searchOP==null){
model.put("error","该用户不存在！");
model.put("code","1");
return "admin/login";
}else {
if(searchOP.getPassword().equals(op.getPassword())){
//比较输入密码，此时表示密码正确，跳转到主页面
return "admin/index";
}else{
model.put("error","输入密码错误！");
model.put("code","2");
return "admin/login";
}
}
前台处理
前台需要接收modelmap里面的两个属性，在js代码里面进行属性的接收，之后直接进行数据的展示处理。
- 逻辑处理js
/**
*
* 登录异常信息显示
*/
function LoginValidator(config) {
this.code = config.code;
this.message = config.message;
this.userName = config.userName;
this.password = config.password;
this.initValidator();
}
//0 未授权 1 账号问题 2 密码错误 3 账号密码错误
LoginValidator.prototype.initValidator = function () {
if (!this.code)
return;
if(this.code==0){
this.addPasswordErrorMsg();
}else if(this.code==1){
this.addUserNameErrorStyle();
this.addUserNameErrorMsg();
}else if(this.code==2){
this.addPasswordErrorStyle();
this.addPasswordErrorMsg();
}else if(this.code==3){
this.addUserNameErrorStyle();
this.addPasswordErrorStyle();
this.addPasswordErrorMsg();
}
return;
}
LoginValidator.prototype.addUserNameErrorStyle = function () {
this.addErrorStyle(this.userName);
}
LoginValidator.prototype.addPasswordErrorStyle = function () {
this.addErrorStyle(this.password);
}
LoginValidator.prototype.addUserNameErrorMsg = function () {
this.addErrorMsg(this.userName);
}
LoginValidator.prototype.addPasswordErrorMsg = function () {
this.addErrorMsg(this.password);
}
LoginValidator.prototype.addErrorMsg=function(field){
$("input[name='"+field+"']").parent().append('<small data-bv-validator="notEmpty" data-bv-validator-for="'+field+'" class="help-block">' + this.message + '</small>');
}
LoginValidator.prototype.addErrorStyle=function(field){
$("input[name='" + field + "']").parent().addClass("has-error");
}
- 使用js接收modelmap数据，需要注意th:inline标签。
<script th:inline="javascript">
var message=[[${error}]];
var code=[[${code}]];
if(message!=""){
new LoginValidator({
code:code,
message:message,
userName:'username',
password:'password'
});
}
</script>
综上，实现了基于bootstrapvalidator和thymeleaf框架的登录校验。
