纳税服务系统【用户模块之用户唯一性校验】

前言

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

我们发现:在新增或编辑页面的时候用户的账号是可以重复的,这是不符合我们的逻辑的。
这里写图片描述

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

分析

用户在填写完账户的时候,就应该去做校验了。【使用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}"},

效果:

这里写图片描述


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值