【SSH项目实战】国税协同平台-8.户帐号唯一性校验

可以看到我们添加用户要指派一个账号

但是我们的账号一定是不能重复的，如果账号已经存在，我们不就能让它保存在系统中，要告诉用户账号已经存在。所以我们这次要进行用户账号唯一性的校验。

校验用户帐号唯一性：

需要校验的地方：新增与编辑；其中编辑页面时，帐号是已经存在的需要将当前帐号排除在校验范围内

校验时机：当帐号的值发生变化时；保存的时候

校验帐号唯一：
前端：ajax

后端：
1、获取帐号
2、校验
2.1、根据帐号查询用户们
     select * from user where account='帐号' and id != '用户id'

我们下面来实现:
在前台我们使用Ajax技术来实现校验,我们先在addUI.jsp中添加相应的js代码，当我们的账号值改变的时候，我们就执行相应的js代码:

[javascript]  view plain copy

1. <tr>  
2.     <td class="tdBg" width="200px">帐号：</td>  
3.     <td><s:textfield id="account" name="user.account" οnchange="doverify()"/></td>  
4. </tr>  
5. 相应的js方法:  
6. <script type="text/javascript">  
7.     //校验账号唯一  
8.     function doverify(){  
9.         //1.获取账号  
10.         var account=$("#account").val();  
11.         if(account!=""){  
12.             //2.校验get/post/getJson/ajax   
13.             $.ajax({  
14.                 url:"${basePath}tax/user_verifyAccount.action",  
15.                 data:{"user.account":account},  
16.                 trpe:"post",  
17.                 success:function(msg){  
18.                     if("true"!=msg){  
19.                         //账号已经存在  
20.                         alert("账号已经存在,请使用其它账号!");  
21.                         //定焦  
22.                             $("#account").focus();  
23.                     }  
24.                 }  
25.             });  
26.         }  
27.     }  
28. </script>  

前台的代码基本上写完，我们在后台实现user_verifyAccount。
首先在UserAction中添加verifyAccount方法:

[java]  view plain copy

1. //检验用户账号唯一  
2. public void verifyAccount(){  
3.     try {  
4.         //1.获取账号  
5.         if (user != null && StringUtils.isNotBlank(user.getAccount())) {  
6.             //2.根据账号到数据库中校验是否存在该账号对应的用户  
7.             List<User> list = userService.findUserByAccountAndId(user.getId(), user.getAccount());  
8.             String strResult = "true";  
9.             if (list != null && list.size() > 0) {  
10.                 //说明该账号已经存在  
11.                 strResult = "false";  
12.             }  
13.   
14.   
15.             //输出  
16.             HttpServletResponse response = ServletActionContext  
17.                     .getResponse();  
18.             response.setContentType("text/html");  
19.             ServletOutputStream outputStream = response.getOutputStream();  
20.             outputStream.write(strResult.getBytes());  
21.             outputStream.close();  
22.         }  
23.     } catch (Exception e) {  
24.         e.printStackTrace();  
25.     }  
26.       
27. }  

我们的userService中还没有findUserByAccountAndId方法，我们来实现它。
在接口中定义findUserByAccountAndId()方法，我们在UserServiceImpl中实现这个方法:

[java]  view plain copy

1. @Override  
2. public List<User> findUserByAccountAndId(String id, String account) {  
3.     return userDao.findUserByAccountAndId(id,account);  
4. }  

我们的userDao中还没有findUserByAccountAndId方法，我们来实现它。
在接口中定义findUserByAccountAndId()方法，我们在UserDaoImpl中实现这个方法:

[java]  view plain copy

1. @Override  
2. public List<User> findUserByAccountAndId(String id, String account) {  
3.     String hql="FROM User WHERE account = ?";  
4.     if(StringUtils.isNoneBlank(id)){  
5.         hql+=" AND id != ?";  
6.     }  
7.     Query query=getSession().createQuery(hql);  
8.     query.setParameter(0, account);  
9.     if(StringUtils.isNoneBlank(id)){  
10.         query.setParameter(1, id);  
11.     }  
12.     return query.list();  
13. }  

前后台的代码都已经完成，我们来测试一下:
我们点击新增，之前我们有一个账号叫“jack”，我们故意输入这个账号之后会发现给予了错误提示


然后我们换一个没有用过的，便不再有提示:


所以我们的账户校验功能成功！

光这么校验还不行，如果用户忽略这个警告继续保存还是不行的，所以我们要在用户点击“保存”按钮的时候再次进行校验:

[html]  view plain copy

1. <input type="submit" class="btnB2" value="保存" onclick="return doSubmit()"/>  

检测的js代码:
(我们修改了之前的doverify()方法，所以我将之前代码也放上来。我们设置了一个全局变量vResult，如果我们账号校验成功，vResult就为true，如果校验失败就是默认的false，这样我们就可以控制表单的提交。但是因为Ajax是异步提交，所以我们的vResult的值并不能正确的得到，所以我们要把Ajax的提交方式改为“非异步”，这样才能正确得到vResult的值，从而判断是否可以让用户提交表单)

[html]  view plain copy

1. <script type="text/javascript">  
2.     var vResult=false;  
3.       
4.     //校验账号唯一  
5.     function doverify(){  
6.         //1.获取账号  
7.         var account=$("#account").val();  
8.         if(account!=""){  
9.             //2.校验get/post/getJson/ajax   
10.             $.ajax({  
11.                 url:"${basePath}tax/user_verifyAccount.action",  
12.                 data:{"user.account":account},  
13.                 trpe:"post",  
14.                 async:false,//非异步  
15.                 success:function(msg){  
16.                     if("true"!=msg){  
17.                         //账号已经存在  
18.                         alert("账号已经存在,请使用其它账号!");  
19.                         //定焦  
20.                         $("#account").focus();  
21.                     }else{  
22.                         vResult=true;  
23.                     }  
24.                 }  
25.             });  
26.         }  
27.     }  
28.     //提交表单  
29.     function doSubmit(){  
30.         var name=$("#name");  
31.         if(name.val()==""){  
32.             alert("用户名不能为空！");  
33.             name.focus();  
34.             return false;  
35.         }  
36.           
37.         var password=$("#password");  
38.         if(password.val()==""){  
39.             alert("密码不能为空！");  
40.             password.focus();  
41.             return false;  
42.         }  
43.         //账号校验  
44.         doverify();  
45.         if(vResult){  
46.             //允许提交表单  
47.                 return true;  
48.             }else{  
49.                 return false;  
50.             }  
51.     }  
52. </script>  

我们测试，故意输入一个重复的账号，忽略警告直接进行保存，但是发现报错了

说明我们的控制成功！

下面我们同时完成编辑界面的数据校验，同样先在用户名、账号、密码上加上id，然后在账户上加上改变事件:

[html]  view plain copy

1. <tr>  
2.     <td class="tdBg" width="200px">用户名：</td>  
3.     <td><s:textfield id="name" name="user.name"/> </td>  
4. </tr>  
5. <tr>  
6.     <td class="tdBg" width="200px">帐号：</td>  
7.     <td><s:textfield id="account" name="user.account" onchange="doverify()"/></td>  
8. </tr>  
9. <tr>  
10.     <td class="tdBg" width="200px">密码：</td>  
11.     <td><s:textfield id="password" name="user.password"/></td>  
12. </tr>  

当然还有保存时的校验方法

[html]  view plain copy

1. <input type="submit" class="btnB2" value="保存" onclick="return doSubmit()"/>  

js方法(我们检测除了自己之外还有没有人使用这个账号):

[javascript]  view plain copy

1. <script type="text/javascript">  
2.     var vResult = false;  
3.     //校验帐号唯一  
4.     function doverify(){  
5.         //1、获取帐号  
6.         var account = $("#account").val();  
7.         if(account != ""){  
8.             //2、校验   
9.             $.ajax({  
10.                 url:"${basePath}tax/user_verifyAccount.action",  
11.                 data: {"user.account": account,"user.id": "${user.id}"},  
12.                 type: "post",  
13.                 async: false,//非异步  
14.                 success: function(msg){  
15.                     if("true" != msg){  
16.                         //帐号已经存在  
17.                         alert("帐号已经存在。请使用其它帐号！");  
18.                         //定焦  
19.                         $("#account").focus();  
20.                         vResult = false;  
21.                     } else {  
22.                         vResult = true;  
23.                     }  
24.                 }  
25.             });  
26.         }  
27.     }  
28.     //提交表单  
29.     function doSubmit(){  
30.         var name = $("#name");  
31.         if(name.val() == ""){  
32.             alert("用户名不能为空！");  
33.             name.focus();  
34.             return false;  
35.         }  
36.         var password = $("#password");  
37.         if(password.val() == ""){  
38.             alert("密码不能为空！");  
39.             password.focus();  
40.             return false;  
41.         }  
42.         //帐号校验  
43.         doverify();  
44.         if(vResult){  
45.         return true;  
46.         }else{  
47.             return false;  
48.         }  
49.     }  
50. </script>  

测试，我们点击一个用户进行“编辑”操作，我们故意把它的账户名“jack”改为已经被注册的“Aim”:

发现不能提交，所以我们的编辑页面的校验也成功！

至此我们的所有校验工作已经完成。