JS加正则表达式实现表单的输入验证功能并通过Servlet实现页面的跳转
前言
提示：
本章是在结课后开始复习做下记录，本章主要任务是利用JS加正则表达式实现表单输入的验证功能，通过JSP加Servlet实现页面的跳转与传值。为完成整个系统的新增功能做铺垫
一、JSP代码（JS加正则表达式实现表单的输入验证功能）
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
form{
width: 500px;
height:300px;
border:1px solid #000;
background-color: greenyellow;
margin:0 auto;
}
</style>
</head>
<body>
<form action="loginServlet" method="post">
<table>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" id="userName" name="userName"
onblur="getUserName()">
<span id="userNameShow"></span>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" id="pwd" name="pwd" onblur="getPwd()">
<span id="pwdShow"></span>
</td>
</tr>
<tr>
<td>
确认密码：
</td>
<td>
<input type="text" id="pwd2" name="pwd2" onblur="getPwd2()">
<span id="pwd2Show"></span>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex">
男
<input type="radio" name="sex">
女
</td>
</tr>
<tr>
<td>
年龄：
</td>
<td>
<input type="text" id="age" name="age" onblur="getAge()">
<span id="ageShow"></span>
</td>
</tr>
<tr>
<td>
手机号：
</td>
<td>
<input type="text" id="phone" name="phone" onblur="getPhone()">
<span id="phoneShow"></span>
</td>
</tr>
<tr>
<td>
地址：
</td>
<td>
<input type="text" id="site" name="site" onblur="getSite()">
<span id="siteShow"></span>
</td>
</tr>
<tr>
<td>
<input type="button" value="确定" οnclick="refer()" id = "button">
</td>
</tr>
</table>
</form>
<script>
var isNOt = false;
function getUserName(){
var userName = document.getElementById("userName").value;
var userNameShow =document.getElementById("userNameShow");
if(userName==""){
userNameShow.innerText = "用户名不能为空";
userNameShow.style.color= "red";
return false;
}else if(!/^[0-9a-zA-z]{6,18}$/.test(userName)){
userNameShow.innerText = "长度要在6-18之间";
userNameShow.style.color= "red";
return false;
}else{
userNameShow.innerText = "验证通过";
userNameShow.style.color= "green";
return true;
}
}
function getPwd(){
var pwd = document.getElementById("pwd").value;
var pwdShow =document.getElementById("pwdShow");
if(!/^[0-9a-z]{8,16}$/.test(pwd)){
pwdShow.innerText = "只能是数字或字母且长度要在8-16之间";
pwdShow.style.color= "red";
return false;
}else{
pwdShow.innerText = "验证通过";
pwdShow.style.color= "green";
return true;
}
}
function getPwd2(){
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
var pwd2Show =document.getElementById("pwd2Show");
if(pwd!=pwd2){
pwd2Show.innerText = "要和密码一致";
pwd2Show.style.color= "red";
return false;
}else{
pwd2Show.innerText = "验证通过";
pwd2Show.style.color= "green";
return true;
}
}
function getAge(){
var age = document.getElementById("age").value;
var ageShow =document.getElementById("ageShow");
if(!/[0-9]/.test(age)){
ageShow.innerText = "必须是数字";
ageShow.style.color= "red";
return false;
}else{
ageShow.innerText = "验证通过";
ageShow.style.color= "green";
return true;
}
}
function getPhone(){
var phone = document.getElementById("phone").value;
var phoneShow =document.getElementById("phoneShow");
if(!/[1]{1}[0-9]/.test(phone)){
phoneShow.innerText = "必须是数字并且是1开头";
phoneShow.style.color= "red";
return false;
}else{
phoneShow.innerText = "验证通过";
phoneShow.style.color= "green";
return true;
}
}
function getSite(){
var site = document.getElementById("site").value;
var siteShow =document.getElementById("siteShow");
if(site==""){
siteShow.innerText = "地址不能为空";
siteShow.style.color= "red";
return false;
}else{
siteShow.innerText = "验证通过";
siteShow.style.color= "green";
return true;
}
}
function rerefer(){
if(getUserName()&&getPwd()&&getPwd2()&&getAge()&&getPhone()&&getSite()){
document.getElementById("button").style.type = "submit";
}else{
return false;
}
}
</script>
</body>
</html>
二、Servlet代码（页面的跳转传值）
package cn.myharr.action;
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;
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//编码问题
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取值ֵ
String userName = request.getParameter("userName");
String pwd = request.getParameter("pwd");
String pwd2 = request.getParameter("pwd2");
String sex = request.getParameter("sex");
String age = request.getParameter("age");
String phone = request.getParameter("phone");
String site = request.getParameter("site");
//响应把值传到页面
PrintWriter out = response.getWriter();
out.println(userName);
out.println(pwd);
out.println(pwd2);
out.println(sex);
out.println(age);
out.println(phone);
out.println(site);
}
}
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
