随笔-124  评论-49  文章-56  trackbacks-0

Page


The following is register.jsp, which takes required information from user regarding registration. For this example, we focus only on validation of username and not the actual registration process.

The most important thing is to know how to access JSF component from JQuery. The id given to inputText is consisting of formid:componentid. So in this example the id given to textbox is  registerform:username. But the presence of : (colon) causes problem to JQuery. So, we need to escape : (colon) using two \\ characters before colon - registerform\\:username.

//register.jsp
<%@page contentType="text/html" %>de">

<%@page contentType=
"text/html" %>
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    
<head>
        
<script language="javascript" src="jquery-1.4.2.js"></script>
        
<script language="javascript">
            
function checkUsername(){
                $.get( 
"checkusername.jsp",{username : $("#registerform\\:username").val()},updateUsername);
            }
            
function updateUsername(response)
            {
                
if (response) {
                    $(
"#usernameresult").text(response);  // update SPAN item with result
            }
        
</script>
        
<title>Registration</title>
    
</head>
    
<body>
        
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
        
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
        
<f:view>
           
<h2>Registration </h2>
           
<h:form  id="registerform">
           
<table>
                    
<tr>
                        
<td>Username : </td>
                        
<td><h:inputText id="username" value="#{userBean.username}"  required="true" onblur="checkUsername()" />
                            
<h:message for="username" />
                            
<span id="usernameresult" />
                    
</tr>
                    
<tr>
                        
<td>Password : </td>
                        
<td><h:inputSecret id="password" value="#{userBean.password}"  required="true" /> <h:message for="password" /> </td>
                    
</tr>
                    
<tr>
                        
<td>Re-enter Password : </td>
                        
<td><h:inputSecret id="confirmPwd" value="#{userBean.confirmPwd}"  required="true" /> <h:message for="confirmPwd" /> </td>
                    
</tr>
                    
<tr>
                        
<td>Email Address  : </td>
                        
<td><h:inputText id="email" value="#{userBean.email}" required="true" onblur="checkEmail()"  /> <h:message for="email" /> </td>
                            
<span id="emailresult" />
                    
</tr>
               
</table>
                                
              
<p/>
              
<h:commandButton actionListener="#{userBean.register}" value="Register" />
              
<p/>
              
<h3><h:outputText value="#{userBean.message}" escape="false"  /> </h3>
              
<p/>
           
</h:form>
        
</f:view>
    
</body>
</html>lt;/f:view>
    
</body>
</html>

Bean


The above JSF Form uses userBean, which is the name given to beans.UserBean class. The class and its entries in faces-config.xml file are given below.
UserBean is the managed bean that stores data coming from JSF form. It contains an action listener - register(), which is supposed to process the data to complete registration process. We don't deal with it as our focus is only on validating username.
//UserBean.java
package beans;

public class UserBean {
    
private String username, password, email,confirmPwd, message;

    
public UserBean() {
    }

    
public String getPassword() {
        
return password;
    }

    
public void setPassword(String password) {
        
this.password = password;
    }

    
public String getUsername() {
        
return username;
    }

    
public void setUsername(String username) {
        
this.username = username;
    }

    
public String getConfirmPwd() {
        
return confirmPwd;
    }

    
public void setConfirmPwd(String confirmPwd) {
        
this.confirmPwd = confirmPwd;
    }

    
public String getEmail() {
        
return email;
    }

    
public void setEmail(String email) {
        
this.email = email;
    }

    
public String getMessage() {
        
return message;
    }

    
public void setMessage(String message) {
        
this.message = message;
    }

    
public void  register(ActionEvent evt) {
       
if (! password.equals(confirmPwd))
       {
             message 
= "Password do not match!";
             
return;
       }
       
// do registration
    } // register
}

xml


The following entry is required in faces-config.xml for UserBean managed bean.
<!-- faces-config.xml -->
<managed-bean>
        
<managed-bean-name>userBean</managed-bean-name>
        
<managed-bean-class>beans.UserBean</managed-bean-class>
        
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>  

Check

Now create a checkusername.jsp to check whether given username is valid. It sends a message if username is already exists otherwise it sends empty string (nothing).
<%@ page import="java.sql.*"  contentType="text/plain"%>
<%
 String username 
= request.getParameter("username");  // sent from client
 
// connect to oracle using thin driver
 Class.forName("oracle.jdbc.driver.OracleDriver");
 Connection con 
= DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","youruser","yourpassword");
 PreparedStatement ps 
= con.prepareStatement("select username from users where username = ?");
 ps.setString(
1,username);
 ResultSet  rs 
= ps.executeQuery();
 
if ( rs.next()) { // found username
    out.println("Username is already present!");  // send this to client
 }
 rs.close();
 ps.close();
 con.close();
%>

Deploy and Test

Now deploy the web application and run register.jsp. If you enter a username that is already present in USERS table then we get message - Username is already present - in SPAN item on the right of username field. If username is unique then SPAN item is set to empty string ( as JSP returns nothing).

from:http://www.srikanthtechnologies.com/blog/java/jquerywithjsf.aspx
posted on 2011-05-30 21:38 junly 阅读(630) 评论(0)  编辑  收藏 所属分类: ajax/jquery/js

只有注册用户登录后才能发表评论。


网站导航: