对复杂的表单进行判断

最新推荐文章于 2024-05-24 00:16:16 发布
最新推荐文章于 2024-05-24 00:16:16 发布
阅读量368 收藏
点赞数
分类专栏： javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunshine940326/article/details/46956861
版权

客户端验证;使用java script

<%@ 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>
    <script type="text/javascript">
        function validate()
        {
            var username=document.getElementsByName("username")[0];
            var password=document.getElementsByName("password")[0];
            var gender=document.getElementsByName("gender");
            var interest=document.getElementsByName("interest");
            var comment=document.getElementsByName("comment")[0];

            if(username.value.length<1)
            {
                alert("用户名不能为空");
                return false;
            }
            if(username.value.length<4||username.value.length>10)
            {
                alert("用户名长度在4-10之间");
                return false;
            } 
         if(password.value.length<4||password.value.length>10)
            {
                alert("密码长度在4-10之间");
                return false;
            }
            if(!gender[0].checked&&!gender[1].checked)
            {
                alert("性别必须选择");
                return false;
            } 

            var n=0;

            for(var i=0;i<interest.length;i++)
            {
                if(interest[i].checked)
                {
                   n++;
                } 
            }
            if(n<1)
            {
               alert("兴趣至少选择一个");
               return false;
            }
            if(n>3)
            {
               alert("兴趣最多选择三个");
               return false;
            }
            if(comment.value.length<1)
            {
                alert("必须填写说明");
                return false;
            }


            return true;
  }








    </script>

  </head>

  <body>
      <form onsubmit="return validate();">

            用户名：<input type="text" name="username"><br>
            密码：<input type="password" name="password"><br>
            性别：男<input type="radio" name="gender" value="男">&nbsp;&nbsp;女<input type="radio" name="gender" value="女"><br>
            兴趣：足球<input type="checkbox" name="interest" value="足球">&nbsp;&nbsp;
                       篮球<input type="checkbox" name="interest" value="篮球">&nbsp;&nbsp;
                       羽毛球<input type="checkbox" name="interest" value="羽毛球">&nbsp;&nbsp;
                       网球<input type="checkbox" name="interest" value="羽毛球">&nbsp;&nbsp;<br>
            地址：<select name="address">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
         </select><br>
          说明：<textarea rows="5" cols="7" name="comment" ></textarea><br>
    <input type="submit" value="点击确认">&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">  



      </form>
    </body>
</html>

使用服务器进行验证:
第一个jsp页面

<%@ 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>

  </head>

  <body>
      <form action="myloginservlet">

            用户名：<input type="text" name="username"><br>
            密码：<input type="password" name="password"><br>
            性别：男<input type="radio" name="gender" value="男">&nbsp;&nbsp;女<input type="radio" name="gender" value="女"><br>
            兴趣：足球<input type="checkbox" name="interest" value="足球">&nbsp;&nbsp;
                       篮球<input type="checkbox" name="interest" value="篮球">&nbsp;&nbsp;
                       羽毛球<input type="checkbox" name="interest" value="羽毛球">&nbsp;&nbsp;
                       网球<input type="checkbox" name="interest" value="羽毛球">&nbsp;&nbsp;<br>
            地址：<select name="address">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
         </select><br>
          说明：<textarea rows="5" cols="7" name="comment" ></textarea><br>
    <input type="submit" value="点击确认">&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">  



      </form>
    </body>
</html>

servlet的处理页面

package firstservlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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

public class myloginservlet extends HttpServlet
{


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException
    {
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        String gender=request.getParameter("gender");
        String[] interest=request.getParameterValues("interest");
        String address=request.getParameter("address");

        address=new String(address.getBytes("iso-8859-1"),"utf-8");
        String comment=request.getParameter("comment");

        List<String>list=new ArrayList<String>();


        if(null==username||"".equals(username))
        {
            list.add("用户名不能为空");
        }
        else if(username.length()<4)
        {
            list.add("用户名长度最短为4");
        }
        else if(username.length()>10)
        {
            list.add("用户名长度最长为10");
        }

        if(null==password||"".equals(password))
        {
            list.add("密码不能为空");
        }
        else if(password.length()<4)
        {
            list.add("密码长度最短为4");
        } 
        else if(password.length()>10)
        {
            list.add("密码长度最长为10");
        }

        if(gender==null)
        {
            list.add("必须选择性别");
        }

        if(interest==null)
        {
            list.add("兴趣最少为1");

        }
        else if(interest.length>3)
        {
            list.add("兴趣最大为3");
        }

        if(comment==null||"".equals(comment))
        {
            list.add("说明没有填写");
        }

        if(list.isEmpty())
        {

            request.setAttribute("username", username);
            request.setAttribute("password", password);
            request.setAttribute("gender", gender);
            request.setAttribute("interest", interest);
            request.setAttribute("address",address);
            request.setAttribute("comment", comment);

            request.getRequestDispatcher("loginSuccess.jsp").forward(request, response);

        }

        else
        {
            request.setAttribute("error",list );
            request.getRequestDispatcher("loginFailure.jsp").forward(request, response);

        }


    }



}

如果符合要求，跳转到成功的页面

<%@ 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 'loginSuccess.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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <body>
    用户名:<%=request.getAttribute("username") %><br>
    密码：<%=request.getAttribute("password") %><br>
    性别:<%=request.getAttribute("gender") %><br>
    兴趣:<%String[] interest=(String[])request.getAttribute("interest"); 
    for(String str:interest)
    {%>
    <%=str %>&nbsp;%nbsp;
    <%} %>
   地址:<%=request.getAttribute("address") %><br>
   说明：<%=request.getAttribute("comment") %> 



  </body>
</html>

如果填写错误，跳转到错误的页面

<%@ 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 'loginFailure.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">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <body>
    错误信息如下：<br><br>

    <%List<String> list = (List<String>)request.getAttribute("error"); %>
    <ul>
       <%for(String str:list) 
       {%>
          <li><font color="#ff0000"><%=str %></font>
        <%} %>

    </ul>
  </body>
</html>

中文乱码

其中会出现中文乱码问题
服务器端使用的是iso-8859-1
客户端的jsp用的是utf-8
需要手动在servlet中加入address=new String(address.getBytes("iso-8859-1"),"utf-8");

sunshine940326
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
复杂数据表单校验
qq_45437773的博客
05-24 123
复杂数据表单校验，js
使用react+antd3开发的复杂、超大数据量级的form表单
weixin_57185351的博客
02-28 1430
本方案肯定不是最佳实践，从产品层面到代码层面都有优化的空间。因为当时在需求评审时，由于疏忽，没有和pm确认该页面的数据量级，以至于在提测之后才知道该页面需要承载的压力之大，所以各方均没有时间再做大量的改造，只能从现有的代码上尽力做下优化。一个嵌套了多个子层级，每一个层级均具有动态增、删、上移、下移、复制功能的form表单，且该表单也支持回显编辑再提交。面对这种大数据量的表单功能，开发时应该注意：1.细化form表单结构；2.细化数据；3.增加判断或使用hooks，减少不必要的重复渲染。
【Element进阶】4、Element UI 复杂表单处理
最新发布
weixin_52938153的博客
05-24 931
Element UI 是一个基于 Vue 2.0 的桌面端组件库，提供了一套丰富的 UI 组件，帮助开发者快速构建美观、高效的用户界面。我们的【Element进阶】系列教程旨在深入探索 Element UI 的高级特性和实际应用。从国际化配置到与 Vue Router 和 Vuex 的结合，从复杂表单处理到自定义组件集成，再到高阶数据展示和性能优化，我们将通过具体案例和最佳实践，帮助开发者全面掌握 Element UI 的使用技巧，提升项目开发效率。
分享一下利用Vue表单处理实现复杂表单布局
忧郁的蛋的专栏
08-12 1156
通过Vue组件化思想、Vue表单组件和表单验证，我们可以很容易地构建一个功能强大的复杂表单布局。在处理复杂表单布局时，可以将表单的各个组成部分拆分为不同的Vue组件，每个组件负责相应的功能。使用Vue.js作为前端框架，我们可以很方便地处理复杂表单布局，并且实现数据的双向绑定。当处理复杂表单布局时，表单验证是一个必不可少的环节。上述代码演示了如何使用Vue表单组件构建一个简单的表单输入元素，并且实现了数据的双向绑定。指令，将输入元素与表单数据进行绑定，当输入元素的值发生变化时，表单数据也会随之更新。
复杂表单设计
EIERICA的博客
05-16 390
设计思路：降低用户负荷 视觉负荷： 在屏幕上识别和寻找信息；信息获取越轻松负荷越低。 认知负荷： 减少用户思考，甚至不用让用户思考，成为大脑潜意识认知的决策。 动作负荷： 减少交互可以降低动作负荷。 心理负荷： 有隐私、健康、财务、安全等。 能更好的的阅读和理解比少一步简单操作更重要。 设计技巧： 降低视觉、认知负荷 a. 信息录入先简单后复杂，先熟悉后陌生 b. 先放必填基础信息，后放选填自定义信息 c. 有前后逻辑关系视情况分布展示 d. 信息能单列展示就不用多列(多列适用于字段之间关联性高
在Vue中如何构建复杂表单？
superherooooss的博客
02-02 1286
创建一个复杂的表单，该表单可以使用一些Vue特性(如v-for和v-model)逐步增强。本文的主要目标是简化构建复杂表单的过程，同时保持可读性和可重用性，并减少开发时间。
JS判断表单输入是否为空(示例代码)
10-26
接着，对这两个值分别调用 `trim()` 函数进行处理，判断处理后的字符串是否为空。如果为空，就弹出警告信息并返回 `false` 阻止表单提交；否则，如果所有检查都通过，函数返回 `true`，允许表单正常提交。 总结起来...
js判断所有表单项不为空则提交表单的实现方法
10-21
这些示例展示了如何使用基本的JavaScript实现表单验证，但实际应用中可能需要更复杂、更健壮的验证规则，例如正则表达式验证、邮箱格式验证等。同时，为了提高用户体验，可以考虑使用异步验证或AJAX提交，以提供实时...
PHP判断表单复选框选中状态完整例子
10-25
在网页开发中，PHP是一种广泛...通过上述步骤，你可以轻松地获取用户在表单中选中的复选框值，并根据这些值进行相应的处理。在实际项目中，你可以根据需要扩展这个示例，比如添加错误检查、验证或更复杂的业务逻辑。
浅析RxJava处理复杂表单验证问题的方法
09-02
在处理复杂表单验证时，传统的方式往往涉及大量重复和冗余的判断逻辑，这使得代码变得难以维护。本文以"浅析RxJava处理复杂表单验证问题的方法"为主题，探讨了如何利用RxJava的`combineLatest`操作符优化这一过程。 ...
正则表达式判断表单验证
07-20
3. **身份证号验证**：中国大陆的身份证号为18位，可使用复杂的正则表达式进行验证，但一般仅做长度检查`^\d{15}(\d{2}[A-Za-z0-9])?$`。 4. **密码强度验证**：通常要求包含大小写字母、数字和特殊字符，例如`^(?=....
简易的表单js验证框架，解决复杂的页面验证过程
03-27
NULL 博文链接：https://javasuperfans.iteye.com/blog/1152281
复杂表单的验证提交解决方案
08-10
复杂表单的验证提交解决方案
form表单加载复杂json数据
03-18
form表单加载复杂json数据
表单验证（实时判断）
ICY___的博客
01-27 2072
上次的正则版表单验证的主要用意是为了正则表达式的应用，而这次的表单验证提供的更加完善的用户体验（实时判断了用户的输入数据正确与否），它是上个版本的延伸。 实现效果： 相应代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;!-- 此表单虽然样式比较简单，但功能实现还是比较复杂的，不同于一般的一步性验证而是将分步验证和最终验证结合在一...
表单判断总结
weixin_43923958的博客
07-29 258
下拉框对比数据并显示 前端固定数据 frameList: [ { name: '请选择', value: '99999' }, { name: '一轴', value: '01' }, { name: '二轴', value: '02' } ], frameIndex: 99999, 后台传来数据，通过index进行传值 if (res.jiagg) { this.frameList.
中后台系统中，复杂表单的开发优化技巧
开源世界
11-26 924
在中后台系统的日常开发中，表单必不可少，当表单内容比较多，例如有上百个字段（这一点都不夸张，血淋淋的现实）时，代码往往也变得复杂且难以维护，加上各种动态联动的表单校验，无疑让我们的页面开发过程雪上加霜，本文将结合自己平时的开发习惯，分享一下在大表单开发中如何处理复杂的表单校验，以及如何对表单进行拆分，减少单个文件堆积过多的代码内容。 表单校验 <template> <el-form ref="ruleForm" :rules="rules" :model="fo
elementUI复杂表单验证
qq_22579421的博客
01-05 1147
elementUI复杂表单验证
vue element 表单校验判断输入是否有指定值
07-12
在Vue Element中，你可以使用表单校验器来判断输入是否有指定的值。下面是一个简单的示例代码： ``` ...这是一个简单的示例，你可以根据具体的需求进行更复杂的表单校验判断。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值