JAVA EE 之 JSP 创建注册界面

最新推荐文章于 2023-03-19 19:26:03 发布

源相

最新推荐文章于 2023-03-19 19:26:03 发布

阅读量684

点赞数 1

分类专栏： Java EE — JSP 注册界面（css简修）文章标签： java jsp javaee

本文链接：https://blog.csdn.net/weixin_47725780/article/details/120650425

版权

Java EE — JSP 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

注册界面（css简修）

1 篇文章 0 订阅

订阅专栏

我们先构思一个大概的框架

示例如下：
请添加图片描述
由以上知

项目构建如下

我们所需文件类型：分别为注册界面（regist.xhtml）和展示页面（show.xhtml）以及受管Bean（Bean.java）和一个自定义邮箱转换器（EmailConverter.java）。

【1】 regist.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>注册页面</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"/>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
       
    </h:head>
    <h:body style="background-color:antiquewhite; margin-top: 65px">
        <h:form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-5 control-label">姓名</label>
                <div class="col-sm-2">
                    <h:inputText class="form-control" id="username" maxlength="12" required="true" requiredMessage="* 此处不能为空" 
                         value="#{bean1.username}"  validator="#{bean1.validateName}"/>
                    <h:message for="username" style="color:red"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="sno" class="col-sm-5 control-label">学号</label>
                <div class="col-sm-2">
                    <h:inputText class="form-control" id="sno" maxlength="12" required="true" requiredMessage="* 此处不能为空" 
                         value="#{bean1.sno}"  validatorMessage="* 检查一下你的学号是否输入正确" >
                        <f:validateRegex pattern="[0-9]{12}"/>
                        <f:validateLength minimum="12"  maximum="12"/>
                    </h:inputText>
                    <h:message for="sno" style="color:red"/>
                </div>
            </div>
                   
            <div class="form-group">
                <label for="gender" class="col-sm-5 control-label">性别</label>
                <div class="col-sm-2">
                    <h:selectOneRadio value="#{bean1.gender}">
                        <f:selectItem itemLabel="男" itemValue="M"/>
                        <f:selectItem itemLabel="女" itemValue="F"/>            
                    </h:selectOneRadio>
                </div>
            </div>
            
            <div class="form-group">
                <label for="age" class="col-sm-5 control-label">年龄</label>
                <div class="col-sm-2">
                    <h:inputText class="form-control" id="age" maxlength="2" required="true" requiredMessage="* 此处不能为空" 
                         value="#{bean1.age}" validatorMessage="* 年龄10-25">
                        <f:validateDoubleRange minimum="10" maximum="25"/>
                    </h:inputText>
                    <h:message for="age" style="color:red"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="phone" class="col-sm-5 control-label">手机号</label>
                <div class="col-sm-2">
                    <h:inputText class="form-control" id="phone" value="#{bean1.phone}" validatorMessage="* 手机号格式不对" >
                        <f:validateRegex pattern="1+[345789]+[0-9]{9}"></f:validateRegex>
                    </h:inputText>
                    <h:message for="phone" style="color:red"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="email" class="col-sm-5 control-label">QQ邮箱</label>
                <div class="col-sm-2">
                    <h:inputText class="form-control" id="email" maxlength="10" value="#{bean1.email}"  
                                 converter="EmailConverter" validatorMessage="* 请输入正确的QQ号">
                        <f:validateRegex pattern="[0-9]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)"/>                
                    </h:inputText>@qq.com
                    <h:message for="email" style="color:red"/>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-offset-6 col-sm-10">
                    <h:commandButton value="注册" action="show" class="btn btn-default btn-lg active"/>
                </div>
            </div>
        </h:form>    
    </h:body>
</html>

【2】 show.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>展示页面</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"/>

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
       
    </h:head>
    <h:body style="background-color:antiquewhite; margin-top: 65px">
        <h:form class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-5 control-label">姓名</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="username" value="#{bean1.username}"/>                    
                </div>
            </div>
            
            <div class="form-group">
                <label for="sno" class="col-sm-5 control-label">学号</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="sno" value="#{bean1.sno}"/>
                </div>
            </div>
                   
            <div class="form-group">
                <label for="gender" class="col-sm-5 control-label">性别</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="gender" value="#{bean1.gender}"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="age" class="col-sm-5 control-label">年龄</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="age" value="#{bean1.age}"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="phone" class="col-sm-5 control-label">手机号</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="phone" value="#{bean1.phone}"/>
                </div>
            </div>
            
            <div class="form-group">
                <label for="email" class="col-sm-5 control-label">QQ邮箱</label>
                <div class="col-sm-2">
                    <h:outputText  class="form-control" id="email" value="#{bean1.email}"/>
                </div>
            </div>
            
        </h:form>    
    </h:body>
</html>

【3】 Bean.java


package com.niit.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;

@ManagedBean(name = "bean1")
@SessionScoped

public class Bean1 {
    private String username;
    private String sno;
    private String gender;
    private String age;
    private String phone;
    private String email;

    public Bean1() {
        gender="M";
    }

    
    public String getUsername() {
        return username;
    }

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

    public String getSno() {
        return sno;
    }

    public void setSno(String sno) {
        this.sno = sno;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }
    

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }


    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        System.out.println("email :"+email);
        this.email = email;
    }
    
    //用户名验证
    public void validateName(FacesContext context, UIComponent component, Object value) throws ValidatorException {
         
         String data1 = (String)value;
         if(data1 !=null){
            if(data1.contains("！") || data1.contains("@") || data1.contains("#")||data1.contains("！ ")){
                 FacesMessage message1=new FacesMessage();
                 message1.setSummary("*不能输入非法字符");
                 throw new ValidatorException(message1);
             }
         }
    }
    
}

【4】 EmailConverter.java


package com.niit.converter;

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();
        
    }
    
    
}

展示效果如下

请添加图片描述

希望对大家有所帮助！

end…

源相

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE 之 JSP 创建注册界面

JAVA EE 之 JSP 创建注册界面我们先构思一个大概的框架示例如下：由以上知项目构建如下我们所需文件类型：分别为注册界面（regist.xhtml）和展示页面（show.xhtml）以及受管Bean（Bean.java）和一个自定义邮箱转换器（EmailConverter.java）。【1】 regist.xhtml<?xml version='1.0' encoding='UTF-8' ?><!DOCTYPE html PUBLIC "-//W3C//D...
复制链接

扫一扫