用JSF实现注册页面

(((φ(◎ロ◎;)φ)))牵丝戏安

已于 2022-08-18 11:55:17 修改

阅读量458

点赞数 1

分类专栏： hiberate 文章标签： servlet java 前端

于 2022-08-17 16:47:41 首次发布

本文链接：https://blog.csdn.net/weixin_51341142/article/details/126388558

版权

hiberate 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaServerFaces (JSF) 和 Hibernate 实现一个注册页面，包括输入验证和数据存储，同时展示了数据在成功注册后的显示界面。详细步骤包括组件布局、数据绑定和验证规则，适合初学者理解Web开发实践。

摘要由CSDN通过智能技术生成

JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架。它提供了一种以组件为中心来开发 Java Web 用户界面的方法，从而简化了开发。下面将讲述如何用JSF和Hibernate数据库，设计注册页面，并将数据存入数据库

注册页面代码

  <h:body style="background-color: blanchedalmond" >
         
        <h:form >
               
                姓名：<h:inputText value="#{bean.name}" id="sname" pt:placeholder="请输入姓名" required="true" validator="#{bean.validate}" style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:yellowgreen">
            </h:inputText>
            <h:message for="name"  style="color: red"/><br/><br/><br/>
            
            
            学号：<h:inputText value="#{bean.sid}" id="sid" pt:placeholder="请输入学号" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateLength maximum="12" minimum="12"/>
            </h:inputText><br/><br/><br/>
            
            <h:message for="sid" style="color: red"/><br/>
            性别：<h:selectOneMenu value="#{bean.sex}" id="sex" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:selectItem itemLabel="男" itemValue="男"/>
                <f:selectItem itemLabel="女" itemValue="女"/> 
            </h:selectOneMenu><br/><br/><br/>

            <h:message for="sex" style="color: red"/><br/>
            年龄：<h:inputText value="#{bean.age}" id="age" pt:placeholder="请输入年龄" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateLongRange maximum="25" minimum="10"/>
            </h:inputText>
            <h:message for="age" style="color: red"/><br/>
            <br/><br/><br/>
            手机号：<h:inputText value="#{bean.phone}" id="phone" pt:placeholder="请输入手机号" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateRegex pattern="^(1[3-9])\d{9}$"/>
            </h:inputText>
            <h:message for="number" style="color: red"/><br/><br/><br/><br/>
            
            QQ邮箱：<h:inputText value="#{bean.email}"  pt:placeholder="请输入邮箱" converter="EmailConverter" style="font-weight:bold;font-size: large;font-family: Verdana;color: green; background-color:yellowgreen" ><br/>
<!--             <f:converter converterId="EmailConverter"/>-->
             </h:inputText><br/><br/><br/>
               <h:commandButton value="注册" action="converter"/>
        </h:form>
    </h:body >

   学号：<h:inputText value="#{bean.sid}" id="sid" pt:placeholder="请输入学号" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateLength maximum="12" minimum="12"/>

此处学号长度规定为12位

 年龄：<h:inputText value="#{bean.age}" id="age" pt:placeholder="请输入年龄" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateLongRange maximum="25" minimum="10"/>
            </h:inputText>

年龄段为25到10岁之间

手机号：<h:inputText value="#{bean.phone}" id="phone" pt:placeholder="请输入手机号" required="true" style="font-weight:bold;font-size: large;font-family: Verdana;color: green ;background-color:yellowgreen" >
                <f:validateRegex pattern="^(1[3-9])\d{9}$"/>
            </h:inputText>

此处有严格的手机号格式限制

注册成功后跳转到保存界面代码


    <h:body style="background-color: yellow">
        <h:form>
            姓名：
            <h:outputText value="#{bean.name} "   style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:#66ff66">
            </h:outputText><br/><br/><br/>
             
         
            
              学号：
              <h:outputText  value="#{bean.sid}"  style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:#99ff66">
                <f:convertNumber type="number"/>  
                </h:outputText><br/><br/><br/>
              
              性别：
              <h:outputText  value="#{bean.sex}" style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:yellowgreen">
             </h:outputText><br/><br/><br/>
              
              年龄：
              <h:outputText  value="#{bean.age}" style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:#99ff67" >
              <f:convertNumber type="number"  />  
              </h:outputText><br/><br/><br/>
              
              手机号：
            <h:outputText  value="#{bean.phone}"  style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:#99ff69">
             <f:convertNumber type="number" />                
           </h:outputText><br/><br/><br/>
              
                  qq邮箱:
              <h:outputText value="#{bean.email}" converter="EmailConverter" style="font-weight:bold;font-size: large;font-family: Verdana;color: green;background-color:#99ff62"><br/>
             <f:converter converterId="EmailConverter" />
            </h:outputText>
        </h:form>
    </h:body>

此处页面显示内容如下

初始页面：

信息填写完成页面

提交完成页面

在此处建立Bean进行绑定

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;


/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 *
 * @author Administrator
 */
@ManagedBean(name = "bean")
@SessionScoped
public class Bean {
    private  int age;
    private  String name;
    private  String sid;
    private  String sex;
    private String  phone;
    private String email;

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        System.out.println("age"+age);
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
        System.out.println("name"+name);
    }

    public String getSid() {
        return sid;
    }

    public void setSid(String sid) {
        this.sid = sid;
        System.out.println("sid"+sid);
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
        System.out.println("sex"+sex);
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
        System.out.println("phone"+phone);
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        System.out.println("email"+email);
        this.email = email;
    }
      public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        String data = (String)value;
        if(data != null){
            if(data.contains("!")||data.contains("@")||data.contains("#")||data.contains("！")||data.contains("%")||data.contains("&")||data.contains("*")){
                FacesMessage message = new FacesMessage();
                message.setSummary(" * 不能输入非法字符");
                throw new ValidatorException(message);
            }
        }
      
      }
}

建立EmailConverter包，设置邮件格式

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;

@FacesConverter(value = "EmailConverter")
public class EmailConverter implements  Converter{

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
    
    //去掉前后空格
       String data=value.trim();
       String email=data+"@qq.com";
       return email;
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
       return  value .toString();
    }
    
}

手机号格式设置

public class MyValidator implements Validator{

    @Override
     public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {
        String data = (String)value;
        if(data != null){
            if(data.contains("!")||data.contains("@")||data.contains("#")||data.contains("！")||data.contains("%")||data.contains("&")||data.contains("*")){
                FacesMessage message = new FacesMessage();
                message.setSummary(" * 不能输入非法字符");
                throw new ValidatorException(message);
            }
        }
    }
    
}

数据库设置

所有配置就到这里了，不懂的可以私聊哦

(((φ(◎ロ◎;)φ)))牵丝戏安

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
用JSF实现注册页面

JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架。它提供了一种以组件为中心来开发 Java Web 用户界面的方法，从而简化了开发。下面将讲述如何用JSF和Hibernate数据库，设计注册页面，并将数据存入数据库。......
复制链接

扫一扫

专栏目录