zoukankan      html  css  js  c++  java
  • BootStrap表单验证用户名重复

    html:

    1 <div class="form-group">
    2                 <label for="username" class="control-label col-md-3 col-sm-4">账号</label>
    3                 <div class="col-md-9 col-sm-8">
    4                     <div class="input-group">
    5                         <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
    6                         <input type="text" class="form-control" id="username" name="username" placeholder="请输入昵称"/>
    7                     </div>
    8                 </div>
    9             </div>

    js:

     1 <script type="text/javascript">
     2     $(function () {
     3         //alert(123)
     4         $("#regist_form").bootstrapValidator({
     5             live: 'enabled', //验证时机,enabled是内容有变化就验证(默认),disabled和submitted是提交再验证
     6             excluded: [':disabled', ':hidden', ':not(:visible)', ':file'], //排除无需验证的控件,比如被禁用的或者被隐藏的
     7             submitButtons: '#reg-btn', //指定提交按钮,如果验证失败则变成disabled,按钮变灰色
     8             message: '通用的验证失败消息', //好像从来没出现过
     9             feedbackIcons: { //根据验证结果显示的各种图标
    10                 valid: 'glyphicon glyphicon-ok',
    11                 invalid: 'glyphicon glyphicon-remove', //小叉号
    12                 validating: 'glyphicon glyphicon-refresh'
    13             },
    14             fields: {
    15                 username: {
    16                     verbose: false, //代表验证按顺序验证。验证成功才会下一个(验证成功才会发最后一个remote远程验证)
    17                     validators: {
    18                         notEmpty: {
    19                             message: '账号不能为空'
    20                         },
    21                         stringLength: {
    22                             min: 6,
    23                             max: 30,
    24                             message: '账号长度必须在6到30之间'
    25                         },
    26                         threshold: 6,//有6字符以上才发送ajax请求
    27 
    28                         remote: { //ajax验证。server result:{"valid",true or false} (返回前台类型)
    29                             url: "stu-exist",
    30                             message: '用户名已存在,请重新输入',
    31                             delay: 500, //ajax刷新的时间是0.5秒一次
    32                             type: 'POST',
    33                             //自定义提交数据,默认值提交当前input value
    34                             /*data: function (validator) {
    35                                 return {
    36                                     userName: $("input[name=userName]").val(),
    37                                     //method: "stuIsExist" //UserServlet判断调用方法关键字。
    38 
    39                                 };
    40                             }*/
    41                         },
    42                     }
    43                 },
    44             }
    45 
    46         });
    47     })
    48 </script>

    StuService:

    1 //验证账号是否存在(用户注册)
    2 Boolean stuIsExist(String username);

    StuServiceImpl:

     1     /**
     2      * @Description //验证账号是否存在
     3      * @Date 2019-04-01 17:39
     4      * @Param [username]
     5      * @return java.lang.Boolean
     6      **/
     7     @Override
     8     public Boolean stuIsExist(String username) {
     9 
    10         UserExample userExample = new UserExample();
    11         UserExample.Criteria criteria = userExample.createCriteria();
    12         criteria.andUsernameEqualTo(username);
    13         List<User> userList = userMapper.selectByExample(userExample);
    14         if (userList.isEmpty()) {
    15             return true;
    16         } else {
    17             return false;
    18         }
    19 
    20     }

    RegisterController.java:

     1     /**
     2      * @Description //验证账号是否存在
     3      * @Date 2019-04-01 17:43
     4      * @Param [username]
     5      * @return java.util.Map<java.lang.String,java.lang.Boolean>
     6      **/
     7     @PostMapping("stu-exist")
     8     @ResponseBody
     9     public Map<String,Boolean> stuIsExist(String username){
    10         Boolean stuIsExist = stuService.stuIsExist(username);
    11         Map<String,Boolean> map = new HashMap<String,Boolean>();
    12 
    13         //map.put("valid",true);
    14         if (stuIsExist){
    15             map.put("valid",true);
    16         }else {
    17             map.put("valid",false);
    18         }
    19 
    20         System.out.println(username+map);
    21         return map;
    22     }
  • 相关阅读:
    数据仓库建设随笔(2)
    实战剖析三层架构2:实例代码
    数据仓库建设随笔(1)
    如何正确地死磕一个问题
    finally块中的代码一定会执行吗
    eclipse中任务进度的使用
    如何在单元测试编码实现类的访问器?这里给出一个答案
    SplitContainer.SplitterDistance属性值设置应注意的与FixedPanel有关
    再谈ReportingService报表中数据源类型为存储过程的数据集如何使用多值参数
    工作流加载及本地通信服务常见的异常
  • 原文地址:https://www.cnblogs.com/116970u/p/10638432.html
Copyright © 2011-2022 走看看