后端使用ssm框架，前端Bootstrap Validator可进行表单验证，使用ajax异步传输可检测用户名是否存在

使用Bootstrap前端框架是比较美观方便的，而使用Bootstrap Validator可大大减少开发js验证的时间，可使用jq技术实现表单验证。

1 导入了js包和css包

这些是需要导入的js,css包.使用表单验证必备

下载地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

2 在表单中，若对某一字段想添加验证规则，默认需要以<div class=”form-group”></div>包裹（对应错误提示会根据该class值定位），内部<input class="form-control" />标签必须有name属性值，此值为验证匹配字段。

3 具体代码如下

js代码

$(function(){
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid:'glyphicon glyphicon-ok',
                invalid:'glyphicon glyphicon-remove',
                validating:'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message:'用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 15,
                            message: '用户名长度在6~15位之间'
                        },
                        threshold:6,
                        remote: {
                            url: '/OnlineMusic/user/checkUserExist.do',
                            message: '该用户已存在，请重新输入',
                            delay: 500,
                            type: 'POST'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含字母数字下划线'
                        }
                    }
                },
                password: {
                    message:'密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 15,
                            message: '密码长度在6~12位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '密码只能包含字母数字下划线'
                        }
                    }
                },
                rpassword: {
                    message:'确认密码验证失败',
                    validators: {
                        notEmpty: {
                            message: '确认密码不能为空'
                        },
                        identical: {
                            field: 'password',
                            message: '两次输入密码不一致'
                        }
                    }
                },
                email: {
                    message:'邮箱验证失败',
                    validators: {
                        notEmpty: {
                            message: '邮箱不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                            message: '您填写的邮箱格式不正确'
                        }
                    }
                }
            }
        });

    });

4 判断用户名已存在是上面代码里的 remote，返回的是json数据如下

{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过

controller层返回代码如下

    @RequestMapping("/checkUserExist.do")
    @ResponseBody
    public String checkUserExist(String username) {
        boolean flag = false;
        String stringJson = null;
        int count = userService.checkUserExist(username);
        if(count == 0) {
            flag = true;
        }
        Map<String, Boolean> map = new HashMap<String, Boolean>();
        map.put("valid", flag);
        ObjectMapper objectMapper = new ObjectMapper();
        try {
            stringJson = objectMapper.writeValueAsString(map);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return stringJson;

    }

注意：@Responsebody 注解表示该方法的返回的结果直接写入 HTTP 响应正文（ResponseBody）中，一般在异步获取数据时使用，通常是在使用 @RequestMapping 后，返回值通常解析为跳转路径，加上 @Responsebody 后返回结果不会被解析为跳转路径，而是直接写入HTTP 响应正文中。