前言

前三篇博文已经基本完成了用户模块的功能了，本篇是对其进行补充…主要完成用户唯一性校验的问题。

我们发现：在新增或编辑页面的时候用户的账号是可以重复的，这是不符合我们的逻辑的。

当用户新增账号的时候，如果该账号已经存在了，就应该告诉用户该账号重复，不能使用该账号。

分析

用户在填写完账户的时候，就应该去做校验了。【使用AJAX】

校验的工作是什么呢????其实就是去查找数据库有没有对应的账户记录，如果有，那么就告诉用户存在了。如果没有，就没问题了。

上面已经说了有两处需要校验用户唯一性的问题：

• 新增页面
• 修改页面

新增页面和修改页面是有不同的处理方案的，因为在修改页面时，如果用户不修改账户，该用户的账户本来就存在了。因此我们要排除该用户的当前账户相同的问题，其实也很简单。

• 在修改页面时是需要id传递过去的，而新增用户是不需要的。在查询数据库的时候，看看有没有id，如果有id就多一个条件即可！

---

前台使用AJAX处理

为账户的输入框添加事件

当账户的输入框修改时，就去数据库查询有没有相同的账户名字。

值得注意的是：本来我是在控件上添加一个id，使用Jquery得到id所在的控件，然后绑定事件，但是用不了。

所以，我只能在控件上绑定一个静态方法了。

    <tr>
        <td class="tdBg" width="200px">帐号：</td>
        <td><s:textfield id="userAccount" name="user.account" onchange="doVerify()"/></td>
    </tr>

把账号的值传递给服务器，接受服务器返回的值

        function doVerify() {
            //得到输入的值
            var account = $("#userAccount").val();

            $.ajax({
                type: "post",
                url: "${basePath}user/user_doVerify.action",
                data:{"user.account" :account},
                success:function (backdata) {
                    alert(backdata);
                }
            });
        }

编写Dao方法

我们使用的是Hibernate，编写的HQL语句是FROM 实体，并不是”SELECT * FROM….. “

    //因为我们不是在查id，因此是不能保证只有一个User对象的，即使在AJAX已经做了检查。因此返回值是个List集合
    List<User> findAccount(String id, String account);

    @Override
    public List<User> findAccount(String id, String account) {

        String hql = "FROM User WHERE account = ? ";

        //判断有没有id,如果有id，多加个条件【本账户不算】
        if (StringUtils.isNotBlank(id)) {

            hql = hql + "  AND id!=?";
        }

        Query query = getSession().createQuery(hql);
        query.setParameter(0, account);
        if (StringUtils.isNotBlank(id)) {
            query.setParameter(1, id);
        }

        List list = query.list();
        return list;

    }

Service调用Dao

 List<User> findAccount(String id, String account);

    @Override
    public List<User> findAccount(String id, String account) {
        return userDaoImpl.findAccount(id, account);
    }

Action处理

由于经常要判断传递过来的数据时候为null，是否为”“，我们使用StringUtils来进行判断：

    /************账户一次性校验*************************/
    public void doVerify() {


        try {
            //默认不存在
            String exist = "false";

            //判断账户是否为空，已经用户输入的数据。【我们使用StringUtils这个类来判断】
            //isNotBlank封装了不为null和不为""
            if (user != null && StringUtils.isNotBlank(user.getAccount())) {
                List<User> list = userServiceImpl.findAccount(user.getId(), user.getAccount());

                //如果查询到数据，那么说明该账户已经存在了。
                if (list != null && list.size() > 0) {
                    exist = "true";
                }
            }
            HttpServletResponse response = ServletActionContext.getResponse();
            response.setContentType("text/html");
            ServletOutputStream outputStream = response.getOutputStream();
            outputStream.write(exist.getBytes());
            outputStream.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

前台提示

    <script type="text/javascript">
        function doVerify() {
            //得到输入的值
            var account = $("#userAccount").val();

            $.ajax({
                type: "post",
                url: "${basePath}user/user_doVerify.action",
                data:{"user.account" :account},
                success:function (backdata) {

                    //当存在的时候，告诉用户该账户已经存在了。
                    if(backdata=="true") {
                        alert("该账户已经存在了！请用别的账户");

                        //定焦
                        $("#userAccount").focus();
                    }else {

                    }
                }
            });
        }
    </script>

效果：

---

完善

上面只是完成了校验用户名是否唯一的功能，但是如果用户不听我的劝告，照样去提交表单，还是可以完成的。

于是在提交表单的时候要判断是否合法才能让用户提交：

把submit按钮改成是button，提供单击事件

   <input type="button" class="btnB2" value="保存" onclick="doSubmit()" />

    <script type="text/javascript">

        var Vresult = true;
        function doVerify() {
            //得到输入的值
            var account = $("#userAccount").val();

            $.ajax({
                type: "post",
                url: "${basePath}user/user_doVerify.action",
                async:false,
                data:{"user.account" :account},
                success:function (backdata) {

                    //当存在的时候，告诉用户该账户已经存在了。
                    if(backdata=="true") {
                        alert("该账户已经存在了！请用别的账户");

                        //定焦
                        $("#userAccount").focus();
                        Vresult = false;
                    }else {
                        Vresult = true;
                    }
                }
            });
        }

        function doSubmit() {

            //在提交之前执行验证，但是验证又是异步的，因此要把异步改成同步
            doVerify();
            //判断能否提交表单
            if(Vresult) {
                document.forms[0].submit();
            }
        }
    </script>

editUI

在editUI上唯一区别就是需要把id传递过去给服务器端。

data: {"user.account": account, "user.id": "${user.id}"},

效果：

---