BootstrapValidator实现注册校验和登录错误提示效果

BootstrapValidator实现注册校验和登录错误提示效果

使用BootstrapValidator进行注册校验和登录错误提示，具体内容如下

1、介绍

在AdminEAP框架中，使用了BootstrapValidator校验框架，本文以注册校验的用户名、登录名、密码、确认密码的校验（后面还有时间区间、服务器校验）为例，讲述BootstrapValidator的使用。同时以登录错误提示为例，说明如何在动态改变组件的错误提示信息。

先看下面的注册与登录的校验效果图：

注册校验：

登录错误提示：根据不同的错误类型，动态改变组件的样式和错误提示内容

2、注册校验

1、头部引入bootstrap-validator.css

复制代码 代码如下:

${basePath}为系统的路径变量

2、form组件

同意遵循AdminEAP协议

注 册

3、引入bootstrap-validator.js

4、校验的核心js代码

3、LoginValidator组件的代码 login.js

/**

* Created by billJiang on 2017/1/12.

* 登录异常信息显示

*/

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('' + this.message + '');

}

LoginValidator.prototype.addErrorStyle=function(field){

$("input[name='" + field + "']").parent().addClass("has-error");

}

以上把错误提示封装成了一个LoginValidator组件，方便前端调用，增强代码的可维护性，因为没有找到Bootstrap-validator改变错误提示的接口，所以查看了源码之后做了封装。

4、补充

1、时间区间校验

"startTime":{

validators:{

date:{

format:'YYYY-MM-DD HH:mm',

message:'日期格式不正确'

},

callback:{

callback:function(value,validator){

var startTime=value;

var endTime=$("#endTime").val();

if(startTime&&endTime){

return DateDiff(endTime,startTime)>0;

}else{

return true;

}

},

message:'结束时间不能小于开始时间'

}

}

},

"endTime":{

validators:{

date:{

format:'YYYY-MM-DD HH:mm',

message:'日期格式不正确'

},

callback:{

callback:function(value,validator){

var startTime=$("#startTime").val();

var endTime=value;

if(startTime&&endTime){

return DateDiff(endTime,startTime)>0;

}else{

return true;

}

},

message:'结束时间不能小于开始时间'

}

}

},

2、服务器校验

"jobClass": {

validators: {

notEmpty: {message: '执行类名不能为空'},

remote:{

url:basePath+"/job/checkJobClass",

data: function(validator) {

return {

jobClass:$('#jobClass').val(),

};

},

message:wIBbRd'该执行类不存在'

}

}

}

后台代码

@RequestMapping(value="/checkJobClass",method = RequestMethod.POST)

@ResponseBody

public Map checkJobClass(String jobClass){

Map map=new HashMap<>();

try {

Class> objClass = Class.forName(jobClass);

if(objClass!=null)

map.put("valid", true);

return map;

} catch (Exception ex) {

logger.error(ex.getMessage().toString());

map.put("valid", false);

return map;

}

}

github： https://github.com/bill1012

AdminEAP：http://admineap.com

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。