ajax校验用户名是否唯一

最新推荐文章于 2023-02-15 16:10:54 发布

dongao5671

最新推荐文章于 2023-02-15 16:10:54 发布

阅读量211

点赞数

文章标签： javascript java 数据库 ViewUI

原文链接：http://www.cnblogs.com/wzhBlog/archive/2013/04/04/3000329.html

版权

我在OA的开发过程中，用户管理里面，添加用户时，需要为用户设置登录名(loginName)，这个登录名必须要唯一，

在添加完登陆名后，需要校验该用户名是否唯一，这里就需要使用到ajax，来完成校验。

我这里使用的是JQuery里的校验插件：jquery.validate

(我没有使用纯js代码，一般我们是使用插件来校验表单的，那么这里教你如何使用插件来调用ajax)

jsp页面代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
　　<title>新建用户的界面</title>

　　　　   //设置校验失败的信息
  　　　　 jQuery.extend(jQuery.validator.messages, {
   　　　　　　 required: "请填写本字段",
  　　　　　　   remote: "验证失败",
   　　　　　　 email: "请输入正确的电子邮件",
   　　　　　　 url: "请输入正确的网址",
   　　　　　　 date: "请输入正确的日期",
　　　　　　    dateISO: "请输入正确的日期 (ISO).",
　　　　　　    number: "请输入正确的数字",
　　　　　　　 ..............

　　　　　　});


  　　　　 $(function(){

　　　　　　 $("form").validate(); //加载完文档，就执行校验，校验不通过，就无法提交

      　　　　　　 //清除ajax的缓存，防止在一个session里它使用缓存中的数据
     　　　　　　 $.ajaxSetup ({
       　　　　　　　　  cache: false // 关闭ajax缓存
    　　　　　　   });
　　　　 });
</script>

</head>
<body>

<div id=MainArea>

<s:form action="userAction_addUi">

<s:hidden name="id"></s:hidden>

              
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
                    <tr><td width="100">所属部门</td>
                        <td>
                           <s:select name="departmentId" cssClass="SelectStyle"
                             list="#departmentList" listKey="id" listValue="name"
                             headerKey="" headerValue="---请选择部门------">

                           </s:select>
                        </td>
                    </tr>
                    <tr><td>登录名</td>
                        <td>

<!--

　　　　　　　　　　　使用该插件提供的remote属性，可以实现ajax效果。格式是：remote:"/userAction_checkLoginName.do" ，里面是你请求的action。这里会自动将

该字段的参数带入，我们可以在该 action中，校验该用户名是否唯一，action返回的数据必须要是true或false的字符串形式

　　　　　　　　必须将校验规则，添加到标签的cssClass属性里去

-->

                          <s:textfield name="loginName" cssClass="InputStyle   {remote:'userAction_checkLoginName.do',messages:{remote:'用户名已被使用，请更换！'}}"/>
                        （登录名要唯一）<%--使用jquery.vialida 的required属性校验必须，使用remote属性实现ajax效果，校验唯一 --%>
      　　....................

　　　　.......................

</s:form>
</div>

</body>
</html>

ajax请求的action：

public class UserAction extends ActionSupport implements ModelDriven<User> {

　　　..............................

　　 /**ajax效果，校验登陆名要唯一*/
　　public String checkLoginName() throws IOException{

　　　　　　 //根据loginName在数据库中查找有没有User对象，Service层里有相应的实现
　　　　　　 User user = userService.getByLoginName(model.getLoginName());
　　　　　　

　　　　　　 //如果没有(user为null)，就返回true，说明注册的用户名可以使用
  　　　　　　String result = user==null?"true":"false" ;

　　　　　　 //返回数据，只返回true或者false字符串
　　　　　　 ServletActionContext.getResponse().getWriter().println(result) ;

  　　　　　　//没有返回页面
  　　　　　　return null ;
　　}

　　　..................................

}

效果如图：

关于jQuery.validate插件的校验规则：

required:true	必填字段
remote:"/MyOA/userAction_checkLoginName.do"	使用ajax方式访问”xxxx.do”，通过返回true或false表示输入值通过或未通过验证
email:true	必须输入正确格式的电子邮件
url:true	必须输入正确格式的网址
date:true	必须输入正确格式的日期
dateISO:true	必须输入正确格式的日期(ISO)，例如：2010-01-01，2010/01/01 只验证格式，不验证有效性
number:true	必须输入合法的数字(负数，小数)
digits:true	必须输入整数
creditcard:	必须输入合法的信用卡号
equalTo:"expr"	输入值必须和$(“expr”)的值相同， expr例子：#fieldId
accept: "gif\|png\|jpg"	输入拥有合法后缀名的字符串（上传文件的后缀），多个后缀之间用’\|’隔开
maxlength:5	输入长度最多是5的字符串(汉字算一个字符)
minlength:3	输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10]	输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]	输入值必须介于 5 和 10 之间
max:5	输入值不能大于5
min:10	输入值不能小于10