Servlet+JavaBean+JSP打造Java Web注册与登录功能

采用Java Web所实现的MVC结构图如下,其中控制器部分采用Servlet来实现,模型部分采用JavaBean来实现,而大部分的视图采用Jsp页面来实现。

思想基础
JSP+JavaBean两层结构工作原理应该是比较熟悉的,也比较好理解。
但是有一点必须要清楚就是用户通过浏览器来发送网页的请求,此请求到达服务器后在服务器端查找对应的网页,如果是首次请求(第二次就不用解释执行了),对于JSP来说要生成Servlet,然后通过Servlet引擎来执行 Servlet,把调用JavaBean的结果嵌入到页面中返回给用户的浏览器。
JSP+JavaBean+Servlet三层结构的实质是多了一个Controller:Servlet来分发客户端浏览器的请求。如果把起控制器作用的Servlet的作用理解为对客户端的请求进行预处理对理解Servlet将有很大的帮助。通过web.xml配置文件可以找到用户请求和特定的 Servlet的对应关系,每个Servlet都有一个特定的Servlet对象与之对应,所以说处理用户请求的就是一个继承自HttpServlet的 Servlet对象。

﹤!-- JSPC servlet mappings start --﹥
  ﹤servlet﹥
    ﹤servlet-name﹥ms1﹤/servlet-name﹥
    ﹤servlet-class﹥news.FirstAction﹤/servlet-class﹥
  ﹤/servlet﹥ 

  ﹤servlet﹥
    ﹤servlet-name﹥ms2﹤/servlet-name﹥
    ﹤servlet-class﹥news.DetailAction﹤/servlet-class﹥
  ﹤/servlet﹥
﹤!-- JSPC servlet mappings end --﹥
  ﹤servlet-mapping﹥
    ﹤servlet-name﹥ms1﹤/servlet-name﹥
    ﹤url-pattern﹥/newsmain﹤/url-pattern﹥
  ﹤/servlet-mapping﹥ 

  ﹤servlet-mapping﹥
    ﹤servlet-name﹥ms2﹤/servlet-name﹥
    ﹤url-pattern﹥/newsDetail﹤/url-pattern﹥
  ﹤/servlet-mapping﹥

如上面所示的摘自web.xml的一段配置servlet,第一部分主要用来配置 Servlet与具体的Servlet对象关联,第二部分主要用来配置请求由哪个Servlet处理,Servlet名字的关联,处理请求就与具体 Servlet处理对象关联起来,比如说,客户端浏览器发来/newsmain的请求,它由ms1 servlet进行处理,通过ms1就能找到相对应的serlet对象news.FirstAction,即 /newsmain-﹥ms1-﹥news.FirstAction,这也就是配置文件的意义所在。到现在懂得了用户/newsmain请求会被news.FirstAction类的对象进行处理,所以说,要看懂程序就要看懂FirstAction的作用是什么就行了。比如说下面是 FirstAction的一个实现。

public final class FirstAction extends HttpServlet {
 protected void service(HttpServletRequest req, HttpServletResponse resp)
  throws ServletException, IOException { 

 DB db = new DB();
 HttpSession session = req.getSession(); 

 try {
  session.setAttribute(Constants.NEWS_LIST_KEY, News
   .SearchNewsTitle(db));
 } catch (Exception e) {
  e.printStackTrace();
 } 

 db.close();
 String target = "/P43_News/newsMain.jsp";
 resp.sendRedirect(target);
 } 

}

通过这个实现可以看到,当服务器收到客户端请求执行 News.SearchNewsTitle(db)的操作,然后把返回值通过session.setAttribute放到session里,然后通过 resp.sendRedirect(target)间接转移到newsMain.jsp,这样在newsMain.jsp里通过 session.getAttribute函数就可以得到在存储在session里的对应值。
回过头来就容易看出JSP+JavaBean工作原理和JSP+JavaBean+Servlet工作原理的不同了,两层结构必须把预处理放在JSP中进行,比如说 News.SearchNewsTitle(db),三层结构先把预处理在Servlet里进行了,然后相当于把这个处理结果通过Session返回给 JSP,让JSP更关注于界面的显示。

登陆注册模块需求
1 注册
1.1 用户的注册表单(用户名,密码,邮箱,昵称,验证码)
1.2 提交注册:要做(用户名,密码,邮箱,昵称,验证码)的校验。
1.2.1 用户名,密码,邮箱,昵称是在客户端浏览器完成的,通过JS来实现。
1.2.2 验证码的是要在服务器端的程序完成的。
2.如果注册表单的校验通过, 那么就进行业务逻辑的判断。
2.1 如果用户已经存在, 告诉用户错误信息。
2.2 如果邮箱已经存在, 告诉用户错误信息。
2.3 如果都不存在 .则进行第3步。
3. 将用户的信息 保存到数据库中
4. 注册 成功, 跳转到 登录 页面
5. 登陆
5.1 将用户的登陆信息发送到后台进行验证
5.2 如果验证成功,则跳转到首页
5.3 如果跳转失败,则跳转到登陆页面,并提示错误信息。

项目目录结构
项目的源码分成四个包文件,分别用来存取模型,视图,控制器和工具类,具体文件如下:

Servlet+JavaBean+JSP打造Java Web注册与登录功能

对于视图,我们定义三个JSP页面,如下所示:

Servlet+JavaBean+JSP打造Java Web注册与登录功能

定义视图
login.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录的表单</title>
</head>
<body>
  <font color="red">${message }</font>
  <a href="regist.jsp">注册新账号</a>
  <form action="${pageContext.request.contextPath }/login" method="post">
    用户名:<input type="text" name="username"><br/>
    密码:<input type="password" name="password"><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

index.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <font color="red">${message }</font>
  <%
   if(request.getSession().getAttribute("username")==null)
   {
     response.sendRedirect("login.jsp");
   }
   else{
    %>
     <font color="red">"欢迎您:" <%=request.getSession().getAttribute("username").toString() %></font>
    <%
   }
  %>
</body>
</html>

regist.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册的表单</title>
<script type="text/javascript">
  function changeImage(){

    document.getElementById("image").src="${pageContext.request.contextPath }/checkimage?" + new Date().getTime()

  }

  function validateForm(){

    // 做 用户名 , 密码, 邮箱, 昵称的校验

    var username= document.getElementById("username").value;
    if(username==""){

      alert("用户名 不能为空");
      return false;
    }

    var password= document.getElementById("password").value;
    if(password==""){

      alert("密码 不能为空");
      return false;
    }

    var repassword= document.getElementById("repassword").value;
    if(password!=repassword){

      alert("密码 必须 一致 ");
      return false;
    }

    var nickname= document.getElementById("nickname").value;
    if(nickname==""){

      alert("昵称 不能为空");
      return false;
    }

    // ^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$
    var email= document.getElementById("email").value;
    if(email.match("^\\s*\\w+(?:\\.{0,1}[\\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\\.[a-zA-Z]+\\s*$")==null){

      alert("邮箱地址 不正确 ");
      return false;
    }

  }
</script>
</head>
<body>
  <h3>用户注册的表</h3>
  <font color="red">${message }</font>

  <form action="${pageContext.request.contextPath }/regist" onsubmit="return validateForm();" method="post">
    <table border="1">
      <tr>
        <td>用户名</td>
        <td>
          <input type="text" name="username" id="username1" v>
        </td>
      </tr>
      <tr>
        <td>密码</td>
        <td>
          <input type="password" name="password" id="password">
        </td>
      </tr>
      <tr>
        <td>请确认密码</td>
        <td>
          <input type="password" name="repassword" id="repassword">
        </td>
      </tr>
      <tr>
        <td>昵称</td>
        <td>
          <input type="text" name="nickname" id="nickname">
        </td>
      </tr>
      <tr>
        <td>邮箱</td>
        <td>
          <input type="text" name="email" id="email">
        </td>
      </tr>
      <tr>
        <td>验证码</td>
        <td>
          <input type="text" name="checkcode">
          <img src="${pageContext.request.contextPath }/checkimage"
          style="cursor: pointer;" id="image" onclick="changeImage();">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="submit" value="注册">
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

定义模型
User模型:

package com.vs2022.model;

public class User {

  private String username;
  private String password;
  private String nickname;
  private String email;

  // alt+shft+ s // 弹出 覆盖 方法的 对话框 。
  public String getUsername() {
    return username;
  }
  public void setUsername(String username) {
    this.username = username;
  }
  public String getPassword() {
    return password;
  }
  public void setPassword(String password) {
    this.password = password;
  }
  public String getNickname() {
    return nickname;
  }
  public void setNickname(String nickname) {
    this.nickname = nickname;
  }
  public String getEmail() {
    return email;
  }
  public void setEmail(String email) {
    this.email = email;
  }

}

UserOperation模型

package com.vs2022.model;

import com.vs2022.utils.DBUtil;

public class UserOperation {

  public final static int USERNAMEEXIST=1;
  public final static int EMAILEXIST=2;
  public final static int SUCCESS=3;
  public final static int FAIL=4;

  public int regist(User user){

    DBUtil db = new DBUtil();

    if(db.serchUserName(user.getUsername())){
      // 说明 用户名 已经存在了
      return USERNAMEEXIST;
    }

    if(db.serchEmail(user.getEmail())){
      // 说明邮箱已经存在
      return EMAILEXIST;
    }

    // 如果 走到 这里, 则说明 ,邮箱 用户名都不存咋, 那么 就让其注册 . 添加 到数据库中
    db.updateUser(user);

    return SUCCESS;
  }

  public int login(User user) {

    DBUtil db = new DBUtil();

    if(db.loginSuccess(user.getUsername(), user.getPassword())){
      // 说明 找到 了用户 名 和密码 都正确的
      return SUCCESS;
    }

    return FAIL;
  }

}

CheckCode模型

package com.vs2022.model;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Hashtable;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class CheckCode {

private String getRandomString() {
  int ranNum = (int) (Math.random() * 9000) + 1000;
  return ranNum + "";
}

public void getCode(int width, int height, HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
  // 在内存中创建图象
  BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
  Graphics g=image.getGraphics();   //创建Graphics对象,其作用相当于画笔
  g.setColor(Color.getColor("F8F8F8"));
  g.fillRect(0, 0, width, height);  //绘制背景
  Font mfont=new Font("楷体",Font.BOLD,16); //定义字体样式
  g.setFont(mfont);          //设置字体
  g.setColor(Color.RED);
  //生成随机数
  String rans=getRandomString();
  //将随机数写入会话
  HttpSession session = request.getSession();
  session.setAttribute("check", rans);
  //将随机数写入图片
  g.drawString(rans, 5, 20);
  // 图象生效
  g.dispose();
  //输出图像
  ImageIO.write(image, "JPEG", response.getOutputStream());

}
}

定义控制器
LoginServlet类

package com.vs2022.controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.vs2022.model.User;
import com.vs2022.model.UserOperation;

public class LoginServlet extends HttpServlet {

  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    // 完成 登录的 逻辑
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    User user = new User();

    user.setUsername(username);
    user.setPassword(password);

    // 调用 业务功能 javabean 类 去实现 登录的 具体 业务逻辑
    UserOperation us = new UserOperation();

    // 返回值 ?
    int i = us.login(user); 

    if(i==4){

      // 说明 登录失败 ,用户名 或 密码错误
      request.setAttribute("message", "用户名或密码错误");
      request.getRequestDispatcher("login.jsp").forward(request, response);

    }else{

      // 登录 成功 , 跳转到网站的 首页, 用 重定向

      // 将username 存入到 session 域中
      request.getSession().setAttribute("username", username);
      response.sendRedirect("index.jsp");
      //request.getRequestDispatcher("index.jsp").forward(request, response);

    }

  }

  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

}

RegistServlet类

package com.vs2022.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.sun.org.apache.commons.beanutils.BeanUtils;

import com.vs2022.model.User;
import com.vs2022.model.UserOperation;

public class RegistServlet extends HttpServlet {

  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    // 解决 post 方式 的乱码
    request.setCharacterEncoding("UTF-8");

    // 完成验证码的校验
    String checkcode = request.getParameter("checkcode");
    String check_code_session = (String) request.getSession().getAttribute("check");
    if(checkcode==null||!checkcode.equals(check_code_session)){

      // 说明 验证码 输入 不正确
      request.setAttribute("message", "验证码输入不正确");
      request.getRequestDispatcher("regist.jsp").forward(request, response);
      return;
    }

    // 如果 走到 了 这里, 则说明 所有的 校验 都通过 ,就 要 调用 涉及 到 处理 业务逻辑 了 

    User user = new User();
    // beanUtils 完成 数据的 封装 到 java bean 对象 中 ,apache 基金会的 一个 开源的jar的 实现。
    try {
      // 前提 : javabean的 字段名 必须 要 与 表单中提交 过来 的 值 的 key 一致, 否则 不能 完成 封装 .
      BeanUtils.populate(user, request.getParameterMap());
    } catch (Exception e) {
      e.printStackTrace();
      throw new RuntimeException("对不起, 封装数据失败 ");
    }

    // 所以 又 会 设计 一个 新的 java bean 类来 实现 业务逻辑
    UserOperation us = new UserOperation();
    try {
      int feedBack = us.regist(user);

      if(feedBack==UserOperation.EMAILEXIST){

        // 说明 邮箱 已经存在
        request.setAttribute("message", "邮箱已经存在 ");
        request.getRequestDispatcher("regist.jsp").forward(request, response);

      }else if(feedBack==UserOperation.USERNAMEEXIST){

        // 说明 用户名已经存在
        request.setAttribute("message", "用户名 已经存在 ");
        request.getRequestDispatcher("regist.jsp").forward(request, response);

      }else{
        // 说明 注册 成功 , 跳转到 登录 页面 . 要用 重定向
        response.sendRedirect("login.jsp" );

      }

    } catch (Exception e) {
      e.printStackTrace();
      throw new RuntimeException("添加 失败 ");
    }
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

}

CheckImageServlet类

package com.vs2022.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.vs2022.model.CheckCode;

public class CheckImageServlet extends HttpServlet {

  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    //禁用缓存,每次访问此页面,都重新生成
    response.setHeader("Pragma","No-cache");
    response.setHeader("Cache-Control","no-cache");
    response.setDateHeader("Expires", 0);
    response.setContentType("image/jpeg");
    int width=40;
    int height=30;
    //生成验证码的匿名对象,并生成验证码
    new CheckCode().getCode(width,height,request,response);
  }

  public void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {

    doGet(request, response);
  }

}

定义工具类
DBUtil类

package com.vs2022.utils;

import java.sql.*;
import com.vs2022.model.User;

public class DBUtil {

  boolean bInited = false;

  // 加载驱动
  public void initJDBC() throws ClassNotFoundException {
    // 加载MYSQL JDBC驱动程序
    Class.forName("com.mysql.jdbc.Driver");
    bInited = true;
    System.out.println("Success loading Mysql Driver!");

  }

  public Connection getConnection() throws ClassNotFoundException,
      SQLException {
    if (!bInited) {
      initJDBC();
    }
    // 连接URL为 jdbc:mysql//服务器地址/数据库名
    // 后面的2个参数分别是登陆用户名和密码
    Connection conn = DriverManager.getConnection(
        "jdbc:mysql://localhost:3306/数据库", "用户名", "密码");
    return conn;
  }

  public boolean loginSuccess(String userName, String password) {
    boolean returnValue = false;
    String sql = "SELECT * FROM user where username=? and password=?";
    Connection conn = null;
    PreparedStatement ps=null;
    int i=0;

    try {
      conn = getConnection();
      ps=conn.prepareStatement(sql);
      ps.setString(1, userName);
      ps.setString(2, password);
      ResultSet rs=ps.executeQuery();
      if(rs.next()){
        returnValue=true;
      }
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } catch (SQLException e) {
      e.printStackTrace();
    }
    return returnValue;
  }

  public boolean updateUser(User user) {
    boolean flag=false;
    int i=0;
    Connection conn=null;
    PreparedStatement ps=null;
    String sql= "insert into user (username,password,nickname,email) values(?,?,?,?)";
    try {
      conn = getConnection();
      ps=conn.prepareStatement(sql);
      ps.setString(1, user.getUsername()); //对占位符设置值,占位符顺序从1开始,第一个参数是占位符的位置,第二个参数是占位符的值。
      ps.setString(2, user.getPassword());
      ps.setString(3, user.getNickname());
      ps.setString(4, user.getEmail());
      i=ps.executeUpdate();
      if(i>0){
        flag=true;
      }
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    }catch (SQLException e) {
      e.printStackTrace();
    }
    return flag;
  }

  public boolean serchUserName(String userName){
    boolean returnValue = false;
    String sql = "SELECT * FROM user where username=?";
    Connection conn = null;
    PreparedStatement ps=null;
    try {
      conn = getConnection();
      ps=conn.prepareStatement(sql);
      ps.setString(1, userName);
      ResultSet rs=ps.executeQuery();
      if(rs.next()){
        returnValue=true;
      }
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } catch (SQLException e) {
      e.printStackTrace();
    }
    return returnValue;
  }

  public boolean serchEmail(String email){
    boolean returnValue = false;
    String sql = "SELECT * FROM user where email=?";
    Connection conn = null;
    PreparedStatement ps=null;
    int i=0;
    try {
      conn = getConnection();
      ps=conn.prepareStatement(sql);
      ps.setString(1, email);
      ResultSet rs=ps.executeQuery();
      if(rs.next()){
        returnValue=true;
      }
    } catch (ClassNotFoundException e) {
      e.printStackTrace();
    } catch (SQLException e) {
      e.printStackTrace();
    }
    return returnValue;
  }
}
时间: 2016-05-24

js实现登录与注册界面

完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="

JSP+MySQL实现网站的登录与注册小案例

为了练手,我就自己试着做了一个网站的登录与注册的小案例.由于没有做美化处理,所以界面并不是很好看. 网站实现的功能如下:  •用户首次注册功能  •用户登录功能 下面我将会分模块展示 注册模块 首先需要一个注册界面,如下register.jsp: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOC

在jsp中用bean和servlet联合实现用户注册、登录

声明:作者原创,版权所有.未经授权,不得转载 在jsp中用bean和servlet联合实现用户注册.登录 作者:imagebear版权:imagebear 本例需要的软件和运行环境:1.Windows2000 Server操作系统2.jdk1.43.JCreator2.5(java源码编辑调试器,吐血推荐!)4.Macromedia JRun MX5.Macromedia Dreamweaver MX(非必需)6.MySQL数据库(最好安装MySQL Control Center) 一.数据库设

js制作带有遮罩弹出层实现登录注册表单特效代码分享

本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图:                     ----------------------查看效果   源码下载----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. jquery制作的带有遮罩弹出层实现登录注册等表单的特效源码,是一段实现了点击后在原始页面上弹出想用页面的代码.  为大家分享的js制作带有遮罩弹出层实现登录注册表单代码特效

原生js验证简洁注册登录页面

序 一个以js验证表单的简洁的注册登录页面,不多说直接上图 效果 主要文件 完整代码 1 sign_up.html 注册表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign-up</title> <link rel="stylesheet" href="css

jsp基于XML实现用户登录与注册的实例解析(附源码)

简单的基于xml做数据库的登录与注册 主题介绍: 1.xml的读取和存储,主要是用到dom4j技术,(网络中的文件存储路径采用classLoader) 文件的读取和存储,写了一个工厂类 public class DocumentFactory { private static Document dom=null;//需要共享一个dom,所以需要设置为static private static String name="user.xml"; private static String f

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS

node.js实现登录注册页面

本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <

JSP实现用户登录、注册和退出功能

本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp

Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li

AngularJS学习笔记之表单验证功能实例详解

本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

php+ajax注册实时验证功能

ajax的实时验证技术已经很成熟了,在一些规范的网站上,如果有注册验证的模板,必定会涉及到ajax的无刷新验证,这在用户注册的体验中是很棒的,对比一个不能及时和后台无刷新对接的验证模式,要重新返回来刷新,这对于用户来说,体验上是很不友好的. ajax的模式几乎是所有站点应用的需求,ajax作为前端无刷新验证,可以和所有后台语言进行组合使用,比如asp+ajax,php+ajax,.net+ajax等等组合,这里主要讲解的是php+ajax的注册验证. 下面的验证是一个完整的实例,我们在网站上面注

AngularJs用户登录问题处理(交互及验证、阻止FQ处理)

本文介绍了AngularJs用户登录的交互及验证.阻止FQ处理,具体如下 1. 静态页面搭建及ng的form表单验证实现: <div class="register-frame-all"> <div class="register-frame"> <div class="register-msg"> <i></i> <form name="loginForm"

AngularJS表单验证功能

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的.在人与人沟通的语境中,表单验证给出来的反馈同获得正确输入同等重要. 表单验证不仅能给用户提供有用的反馈,同时也能保护我们的Web应用不会被恶意或者错误的输入所破坏.我们要在Web前端尽力保护后端. AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用,并且非常方便.AngularJS提供了很多表单验证指令. <form name="form" novalidate> <label na

ASP.NET实现用户注册和验证功能(第4节)

在前几篇文章中小编已经为大家分享几篇关于验证控件实现的文章,今天我们再具体为用户登录页面添加输入数据验证功能和验证码功能. 学习内容 1.创建ASP.NET应用程序. 在E:\Solution1目录下双击文件,运行Visual Studio 2008.在"解决方案资源管理器"面板中,右击"解决方案,在弹出的快捷菜单中选择"添加"--"新建网站"命令,新建Chap4站点. 2.在站点Default.aspx页面上先添加一个6行2列的表格,

使用AngularJS对表单提交内容进行验证的操作方法

AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.它有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等--使用它可以大大减少书写代码的工作量,但和Jquery不同,使用AngularJS有一定的难度,因此今天我将介绍以下怎样使用AngularJS来对表单的提交内容进行验证. AngularJS对表单中常用的验证操作 $dirty 表单有填写记录 $valid 字段内容合法的 $invalid 字段内容是非法的 $pristine

用AJAX实现页面登陆以及注册用户名验证的简单实例

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX 是一种用于创建快速动态网页的技术.其核心是 JavaScript 对象 XMLHttpRequest.该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术.简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户. 通过在后台与