Layui判断用户名是否重复

Layui表单验证支持ajax判断用户名是否重复

1. 在一个表单中，在提交前我们想判断该用户名是否存在，在layui中不支持,可以使用form表单的verify来进行验证

步骤

1. html

   <div class="layui-form-item">
           <label class="layui-form-label required">用户名</label>
           <div class="layui-input-block">
               <input type="text" name="number" lay-verify="username" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input" style="width: 80%">
               <tip>填写账号的名称。</tip>
           </div>
       </div>
   

2. js

   //判断表单中的值是否符合条件
   form.verify({
   
       //将用户名是否可用作为验证条件 表单提交时触发
       username:function(value){
           var datas={number: value};
           var message = '';
           //console.log(datas)
           $.ajax({
               type:"POST",
               url: "/IfNumber",  //指的是 对应后台的方法
               async: false, //改为同步请求
               contentType:'application/json;charset=UTF-8',
               data:JSON.stringify(datas),
               dataType:'json',
               success:function(data){
                   if(data){
   
                   }else{
                       message ="用户名已存在，请重新输入！"
                   }
               }
           });
           //需要注意 需要将返回信息写在ajax方法外
           if (message !== ''){
               return message
           }
       }
   });
   

3. mapper.xml

   <!--根据账户名查询-->
   <select id="queryUserByNumber" parameterType="String" resultType="User">
       select * from pets.user where number = #{number}
   </select>
   

4. UserMapper

   //根据账户名查询用户 (注册验证账户是否存在)
   User queryUserByNumber(String number);
   

5. UserServiceImpl

   @Override
   public User queryUserByNumber(String number) {
       return userMapper.queryUserByNumber(number);
   }
   

6. 后台方法

   //判断用户名是否重复
   @RequestMapping("/IfNumber")
   @ResponseBody
   public boolean toVerifyUsername(@RequestBody User user){
       String number = user.getNumber();
       //根据用户名查询管理员(包括status为0的  以防恢复引起bug)
       User user1 = userService.queryUserByNumber(number);
       if (user1 == null){
           //System.out.println(111); //返回true则为没有该用户名可以被注册
           return true;
       }else {
           //System.out.println(222);
           return false;
       }
   }
   

效果图