对复杂的表单进行判断

客户端验证;使用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");

### Angular 表单联动及动态字段与条件判断 在 Angular 中,表单联动以及动态字段和条件判断可以通过使用 **Reactive Forms** 或 **Template-driven Forms** 来实现。以下是基于 Reactive Forms 的最佳实践方法: #### 使用 Reactive Forms 实现表单联动 通过 `FormGroup` 和 `FormControl` 可以轻松管理复杂表单结构并实现字段间的依赖关系。 ```typescript import { Component } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-root', template: ` <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <!-- 字段A --> <label> Field A: <input type="text" formControlName="fieldA"> </label> <!-- 动态显示字段B --> <div *ngIf="shouldShowFieldB()"> <label> Field B: <input type="text" formControlName="fieldB"> </label> </div> <button type="submit">Submit</button> </form> `, }) export class AppComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ fieldA: ['', Validators.required], fieldB: [''], }); // 当 fieldA 值变化时更新 fieldB 验证规则 this.myForm.get('fieldA')?.valueChanges.subscribe((val) => { const fieldB = this.myForm.get('fieldB'); if (val === 'showCondition') { fieldB?.setValidators([Validators.required]); } else { fieldB?.clearValidators(); } fieldB?.updateValueAndValidity(); // 更新验证状态 }); } shouldShowFieldB(): boolean { return this.myForm.value.fieldA === 'showCondition'; // 判断逻辑 } onSubmit() { console.log(this.myForm.value); } } ``` 上述代码展示了如何根据 `fieldA` 的值来控制 `fieldB` 是否可见及其验证规则的变化[^1]。 #### 动态字段的创建与移除 如果需要支持动态增减字段,则可以利用 `FormArray` 提供的功能。 ```typescript this.myForm = this.fb.group({ fields: this.fb.array([]), }); get fieldsArray(): FormArray { return this.myForm.get('fields') as FormArray; } addNewField() { this.fieldsArray.push( this.fb.control('', Validators.required) ); } removeField(index: number) { this.fieldsArray.removeAt(index); } ``` 模板部分如下所示: ```html <div formArrayName="fields"> <div *ngFor="let field of fieldsArray.controls; let i = index;"> <input [formControlName]="i" placeholder="Enter value"> <button (click)="removeField(i)">Remove</button> </div> </div> <button (click)="addNewField()">Add New Field</button> ``` 此方式允许用户按需添加或删除表单项,并且能够灵活设置每项的初始值和验证器[^2]。 #### 条件判断的最佳实践 对于更复杂的情况,比如多个字段之间的相互影响或者多级嵌套的条件判断,推荐采用自定义验证函数配合观察者模式监听特定控件的状态变更事件来进行实时调整。 例如下面的例子演示了一个简单的密码匹配校验器: ```typescript static passwordMatchValidator(group: FormGroup): any { const pass = group.get('password')?.value; const confirmPass = group.get('confirmPassword')?.value; if(pass !== confirmPass){ return {'mismatch': true}; } return null; } ``` 将其应用到相应的组上即可完成一致性检测。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值