表单提交的客户端验证（通过js函数验证）

最新推荐文章于 2022-12-05 15:18:37 发布

原创最新推荐文章于 2022-12-05 15:18:37 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

Java编程专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一个简单的用户注册页面实现，其中包括基本的表单验证逻辑，确保用户输入的数据完整且一致。通过JavaScript进行前端验证，避免了无效数据的提交。

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
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 'JiaoYan.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">

<script type="text/javascript">
  function check(fom){
   if (fom.user.value=="") {
    alert("用户名不能为空！");
    fom.user.focus();
    return false;
   }
   if (fom.psw.value=="") {
    alert("密码不能能够为空！");
    fom.psw.focus();
    return false;
   }
   if (fom.psw2.value!=fom.psw.value) {
    alert("两次输入的密码不一致！请重新输入！");
    fom.psw.focus();
    return false;
   }
   if (fom.email.value=="") {
    alert("邮箱不能为空！");
    fom.email.focus();
    return false;
   }
   if (fom.email2.value!=fom.email.value) {
    alert("两次输入的邮箱地址不一致！请重新输入！");
    fom.email.focus();
    return false;
   }
  }
</script>
</head>

<body>
   <form action="" name="fom" method="post" onsubmit="return check(this)">
    <p align="center">用户注册</p>
    <p align="center">用户名：<input type="text" name="user">
    </p>
    <p align="center">密码：<input type="password" name="psw">
    </p>
    <p align="center">确认密码：<input type="password" name="psw2">
    </p>
    <p align="center">输入邮箱：<input type="text" name="email">
    </p>
    <p align="center">确认邮箱：<input type="text" name="email2">
    </p>
    <p align="center"><input type="submit" value="提交">
    <input type="reset" value="重置">
    </p>
   </form>
</body>
</html>