CRM项目02

2020-05-17  本文已影响0人  建国同学

一、Bootstrap-Validator验证插件

下载:
http://bootstrapvalidator.votintsev.ru/getting-started/
教程:
https://www.cnblogs.com/landeanfen/p/5035608.html
https://www.cnblogs.com/mzqworld/articles/9068430.html

引入插件

<!--引入验证插件的样式文件-->
<link rel="stylesheet" href="/js/plugins/bootstrap-validator/css/bootstrapValidator.min.css"/>
<!--引入验证插件的js文件-->
<script type="text/javascript" src="/js/plugins/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!--中文语言库-->
<script type="text/javascript" src="/js/plugins/bootstrap-validator/js/language/zh_CN.js"></script>

模板

<script>
        $(function () {
            // 表单验证配置
            $("#editForm").bootstrapValidator({
                feedbackIcons: { //图标
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields:{ // 配置不同的输入框
                    <#--<#if !employee??>-->
                        name:{ // 按照name来找的
                            validators: { // 验证的规则
                                notEmpty: { // notEmpty(必填)  规则的名字 是规定的
                                    message: '不能为空!'  // 错误时的提示信息
                                },
                                remote: {
                                    type: 'POST',
                                    url: '/employee/checkName.do',
                                    message: '用户名已存在!',
                                    delay: 1000 ,
                                    data: function() {  // 自定义提交参数,默认只会提交当前用户名input的参数
                                        return {
                                            id: $('[name="id"]').val(),
                                            name: $('[name="name"]').val()
                                        };
                                    }
                                }
                            }
                        },
                    <#--</#if>-->
                    password:{
                        validators:{
                            notEmpty:{ //不能为空
                                message:"密码必填" //错误时的提示信息
                            },
                            stringLength: { //字符串的长度范围
                                min: 1,
                                max: 5
                            }
                        }
                    },
                    repassword:{
                        validators:{
                            notEmpty:{ //不能为空
                                message:"密码必填" //错误时的提示信息
                            },
                            identical: {//两个字段的值必须相同
                                field: 'password',
                                message: '两次输入的密码必须相同'
                            }
                        }
                    },
                    email: {
                        validators: {
                            emailAddress: {} //邮箱格式
                        }
                    },
                    age:{
                        validators: {
                            between: { //数字的范围
                                min: 18,
                                max: 60
                            }
                        }
                    }
                }
            }).on('success.form.bv', function() { // 点击事件=>表单所有数据验证通过后=>执行里面的代码
                // 不能用提交的方法,会重复的验证表单,死循环
                // $("#editForm").submit(); // 调用提交表单的方法,验证插件就会验证

                // 做自定义的验证

                // 马上提交异步请求
                $("#editForm").ajaxSubmit(function (data) {
                    if(data.success){ // 成功
                        $.messager.alert("成功,2秒后刷新");
                        setTimeout(function () {
                            window.location.href = "/employee/list.do";
                        },2000)
                    }else{
                        alert(data.msg);
                    }
                })
            });
        })
    </script>

后台处理

/**
     * 插件要求返回 valid:false(验证不通过)  valid:true(验证通过)
     * @param name
     * @return
     */
    @RequestMapping("/checkName")
    @ResponseBody
    public HashMap<String, Boolean> checkName(String name, Long id) {
        HashMap<String, Boolean> map = new HashMap<>();
        Employee employeeByName = employeeService.selectByName(name);

        // id不为空,为修改页面
        if (id != null) {
            Employee employeeById = employeeService.get(id);
            // 验证是否修改了 name 值(判断当前验证的 name 值与根据 id 查询的name是否匹配)
            if(name.equals(employeeById.getName())){
                map.put("valid", true); // 相同没修改,验证通过
                return map;
            }else { // 不同修改了,进行验证
                map.put("valid", employeeByName == null);
                return map;
            }
        }

        // 注意:valid 为插件提供的,不能自定义
        map.put("valid", employeeByName == null);
        return map;
    }

二、统一异常处理

**
 * 对控制器进行处理
 * 利用aop
 */
// mvc.xml 的扫描控制器 上一定要扫到
@ControllerAdvice
public class ContrllerExceptionHandler {

    /**
     * 当前的方法用于捕获指定的异常
     */
    @ExceptionHandler(RuntimeException.class) // 规定为运行时异常
    public String handler(RuntimeException e, HttpServletResponse response, HandlerMethod handlerMethod) throws IOException {
        // 打印错误信息方便debug
        e.printStackTrace();
        // 判断如果是ajax对应的方法(判断有没有ResponseBody注解),有就返回JsonResult
        if(handlerMethod.hasMethodAnnotation(ResponseBody.class)){
            response.setContentType("application/json;charset=utf-8"); // 为了适配浏览器,显式的告诉浏览器数据类型和编码方式
            response.getWriter().print(JSON.toJSONString(new JsonResult(false, "操作失败")));
            return null;
        }else {
            // 如果不是,就返回错误的视图页面
            return "common/error";
        }
    }
}

上一篇 下一篇

猜你喜欢

热点阅读