验证表单输入

掌握HTML表单验证与输入类型 本文深入探讨了HTML中的表单验证与输入类型,包括上传按钮的功能缺失、表单验证的概念以及不同类型的输入字段,如日期、电子邮件、URL和搜索。文章通过实际代码示例和解释,帮助读者理解如何在网页中应用这些技术,以及如何通过CSS改善网页的外观和功能。 阅读详情

你需要什么

  • 大约 15 分钟
  • IntelliJ IDEA或其他编辑器
  • JDK 1.8或更高版本
  • Maven 3.2+

你会建立什么

您将构建一个简单的Spring MVC应用程序,它接受用户输入并使用标准验证注解检查输入。您还将看到如何在屏幕上显示错误消息,以便用户可以重新输入有效的输入。

构建步骤

1、添加maven依赖。

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 表单验证模块 -->
        <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-el</artifactId>
        </dependency>

2、创建一个PersonForm对象


import javax.validation.constraints.Min;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;

public class PersonForm {

    @NotNull
    @Size(min=2, max=30)
    private String name;

    @NotNull
    @Min(18)
    private Integer age;

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String toString() {
        return "Person(Name: " + this.name + ", Age: " + this.age + ")";
    }
}
  • @Size(min = 2, max = 30) 只允许长度在2到30个字符之间的名称
  • @NotNull 将不允许空值
  • @Min(18)将不允许值小于18

3、创建一个Web Controller

import javax.validation.Valid;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Controller
public class WebController implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/results").setViewName("results");
    }

    @GetMapping("/")
    public String showForm(PersonForm personForm) {
        return "form";
    }

    @PostMapping("/")
    public String checkPersonInfo(@Valid PersonForm personForm, BindingResult bindingResult) {

        if (bindingResult.hasErrors()) {
            return "form";
        }

        return "redirect:/results";
    }
}

checkPersonFormInfo方法接受两个参数:

  • personForm 对象用 @Valid 标记,以收集您即将构建的表单中填写的属性。
  • bindingResult 对象,因此您可以测试并检索验证错误。

4、构建一个HTML表单

<html >
<meta charset="UTF-8" />
<body>
<form action="#" th:action="@{/}" th:object="${personForm}" method="post">
    <table>
        <tr>
            <td>Name:</td>
            <td><input type="text" th:field="*{name}" /></td>
            <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
        </tr>
        <tr>
            <td>Age:</td>
            <td><input type="text" th:field="*{age}" /></td>
            <td th:if="${#fields.hasErrors('age')}" th:errors="*{age}">Age Error</td>
        </tr>
        <tr>
            <td><button type="submit">Submit</button></td>
        </tr>
    </table>
</form>
</body>
</html>

原文地址 https://spring.io/guides/gs/validating-form-input/

新手避坑指南:在MacBook上为PyTorch正确配置MPS环境,跑通第一个YOLOv8训练 本文详细指导新手如何在MacBook上为PyTorch正确配置MPS环境,并成功运行YOLOv8训练。从环境准备、PyTorch安装到YOLOv8配置和性能调优,提供全面的避坑指南和实用技巧,帮助开发者充分利用Mac的GPU加速能力。 阅读详情

相关推荐

新手必看:如何用T265和ROS实现无人机室内精准定位(附PX4参数配置)

本文详细介绍了如何使用Intel Realsense T265和ROS实现无人机室内精准定位,包括硬件准备、ROS数据流架构设计、PX4参数配置及系统验证。特别针对视觉SLAM技术在室内环境中的应用,提供了从零搭建到进阶优化的全流程解析,适合无人机开发新手快速上手。

weixin_30642561的博客 404

表单验证的简单实现

如果没有表单验证,错误的数据就会发往服务端,会造成服务端压力过大; 所以在前端对数据进行过滤,以减轻服务端压力;

机械工程跑路哥 2154

深入解析LVDS电平标准在LCD屏接口设计中的关键作用

本文深入解析了LVDS电平标准在LCD屏接口设计中的核心作用。文章不仅阐释了LVDS低电压差分信号的工作原理、关键电气参数及抗噪优势,还详细对比了VESA与JEIDA两种主流数据格式,并提供了从PCB布局布线到信号调试的实战避坑指南,是确保高速、稳定显示的关键技术参考。

weixin_28419039的博客 334

form表单校验规则及各种输入框校验总结

各种form表单校验总结

xiaomao_wxj的博客 977

pentaho-kettle依赖拉取失败?试试这个Maven仓库配置的终极解决方案

本文详细解析了Pentaho Kettle依赖拉取失败的常见原因,并提供了三种Maven仓库配置方案,包括基础pom.xml配置、全局settings.xml设置以及企业级私有镜像仓库搭建。通过实战验证的方法和常见问题排查指南,帮助开发者彻底解决pentaho-kettle依赖问题,提升项目构建效率。

weixin_30275415的博客 202

Vivado DDR IP自定义型号避坑指南:如何正确填写CSV参数表(附常见错误排查)

本文详细解析了Vivado DDR IP自定义型号配置中的关键步骤与常见问题,特别针对DDR4内存颗粒的参数提取、CSV参数表填写误区及故障排查提供了实用指南。通过实际案例和调试技巧,帮助工程师避免配置陷阱,提升DDR4系统稳定性和性能。

weixin_29280657的博客 413

Form表单自定义验证规则

工作中遇到的小问题积累

hhhhhhaaaaaha的博客 1792

SAP-MM-采购过账接口(与WMS集成)-代码

1、判断传入值非空检验; 2、判断过账日期是否允许在当前期间; 3、判断是否为集采订单业务,是否审批完成; 4、判断是否发布标准成本发布(此业务场景与价格控制3+S有关) 5、保存日志表; 6、判断业务公司订单审批状态; 7、创建STO交货单、集采公司订单过账、STO公司间创建交货单、交货单过账(两步法)、过账失败回滚(冲销交货、删除交货单、冲销集采入库)

qq_32198063的博客 420

form表单验证、校准

userIdList: [{ type:‘array’ ,required: false, message: '请填写库管员', trigger: 'blur' }],\d)$/g, required: false, message: '请输入正确的邮政编码', trigger: 'blur' }],包含大写字母和 [ 、\ 、] 、^ 、- 、:^[A-Z]*$可以输入汉字:^[\u4e00-\u9fa5]*$可以输入字母(含大小写):^[A-Za-z]*$不能输入纯空格:^[^\s]+[\s]*.*$

and_life的博客 1154

Lammps实现Ar的沸腾过程(包含in文件)

Lammps实现简单的沸腾过程

Rockyoung 3503

从零构建Fama-French多因子模型:量化投资系统开发实战

本文详细介绍了如何从零构建Fama-French多因子模型,并将其应用于量化投资系统的开发。首先,文章概述了Fama-French多因子模型的背景、核心原理和架构,解释了其如何通过引入市场风险、规模、价值、盈利和投资等因子来解释股票收益率的变化。接着,文章详细阐述了构建该模型的具体步骤,包括因子的计算、因子暴露的确定以及模型的估计。通过数学模型和公式,文章对模型进行了理论推导,并举例说明了其应用。此外,文章还提供了项目实战的代码案例,从开发环境搭建到源代码实现,逐步指导读者完成量化投资系统的开发。最后,文章

2501_92132293的博客 1224

Form表单验证

Form表单提交前js验证 1. Onclick() 2. Onsubmit() Button标签input (属性submit button )标签 Input type=button 定义按钮,没有任何行为。多数情况下,用于通过javascript启动脚本 Input type=submit定义提交按钮,提交按钮会把表单数据发送到服务器 1. oncli...

weixin_30664539的博客 5614

基于STM32+ESP8266+手机APP的心率血氧温湿度监测报警系统设计(项目资料ID:18)

基于 STM32 微控制器、ESP8266 无线模块和 QT 手机 APP 的多参数监测报警系统。该系统可实时采集心率、血氧饱和度、环境温湿度等参数,通过 OLED 显示屏本地显示,并通过 WiFi 模块上传至手机 APP 实现远程监测与数据可视化。系统具备报警阈值自定义功能,当参数超出设定范围时,通过蜂鸣器和 LED 进行声光报警。系统以 STM32F103 为控制核心,采用 MAX30102 传感器采集心率和血氧,DHT20 采集温湿度,通过 ESP8266 实现无线通信,配合 QT 开发的手机 APP

以培养嵌入式工程师为己任 1万+

如何处理用户输入验证和表单提交?

如何处理用户输入验证和表单提交?

商务合作欢迎私信我 1万+

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

前端表单输入框验证

此示例构建了一个简单的表单,包含用户名、电话、密码、地址、行业和学校等输入框,以及一个提交按钮。用户输入数据后,点击提交按钮,系统会依据预设规则对输入内容进行验证,若所有输入都有效,会弹出提示框告知验证成功;若有输入不满足规则,会在对应输入框下方显示错误信息。通过上述代码,我们实现了一个简单而灵活的表单输入框验证系统。利用 jQuery 的强大功能,我们可以方便地选取元素、绑定事件和操作 DOM。通过合理设置验证规则和错误信息,能有效确保用户输入的数据质量。

Z09111616的博客 889

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

antd表单中含有输入框以及其他组件,输入发生时触发表单验证问题

在搜索框进行输入搜索时触发了表单的验证效果,应该是没有勾选数据的情况下提交表单才应该触发表单验证,而不是被输入行为触发表单验证

jiangchenW的博客 402

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

表单验证输入范围_使用Validatr在任何浏览器上轻松验证表单输入

在Web上处理表单可能真的很有趣。 您可以在设计,标签甚至身份验证上进行很多自定义。 凭借HTML5中提供的许多新功能, Jay Morrow创建了Validatr ,该Validatr依靠新的HTML5输入属性来执行简单而自动的表单验证。 Validatr是一个跨浏览器的免费jQuery插件。 如果用户输入无效的值,它将自动将表单边框换成红色。 它还可以进行很多输入验证,例如电子邮件,数...

cune1359的博客 245

javascript验证表单输入

//原文地址:http://blog.youkuaiyun.com/linwei_1029/article/details/6903245 function isMail(obj,str,allowNull) { var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(!isNotNull(obj,str,allo

ywhorizen 1270

Flutter&OpenHarmony表单验证与输入处理

本文介绍了在Flutter和OpenHarmony平台上实现表单验证的方法。Flutter使用Form和TextFormField组件,通过validator函数进行验证,支持实时反馈和集中验证。OpenHarmony通过状态管理实现表单验证,利用条件渲染显示错误信息。两种平台都提供了完整的表单验证流程,包括输入检查、错误提示和提交控制,帮助开发者构建用户友好的表单交互体验。文章详细展示了邮箱和密码验证的具体实现代码,为跨平台应用开发提供了实用参考。

2501_94444600的博客 1004

验证表单输入是否正确

$(document).ready(function(){ $('#company_submit').attr('disabled', true); //判断用户输入的信息是否符合规则; $('#company_people').on('input',function() { if ($('#company_people').val() == "") {/*

chengqianduan的博客 981

js表单输入验证

JS表单脚本输入验证   *以下是库函数目录及使用说明:   *   *常用   *1、Trim=去除字符串前后空格         使用方法:String.trim()   *2、ctrim=去除字符串中间空格         使用方法:String.ctrim()   *3、onClickSelect=点中text框的时候,选中其中的文字    使用方法:在in...

一步一步向目标前进! 193

vue监控表单输入事件,正则验证手机号,邮箱

vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"> <input class="input-type" type="text" placeholder="请输入您的邮箱" v-model="mail" @change="email" /> </div> <div class="input-name"...

qq_41241767的博客 2511

[HTML5]其他表单元素及输入验证

1、使用其他表单元素 select、optgroup、textarea、output、keygen 1.1、生成选项列表 select元素可以用来生成一个选项列表供用户选择。 ‼️select元素的name、disabled、form、autofocus、requied属性与input元素的同名属性类似。 ‼️size属性:设定要显示给用户的选项数目 multiple属性:用户一次选择多个选项 提供给用户的选项由option元素 eg: ​​​​​​​<......

GUIDM的博客 2075

11_其他表单内容以及输入验证

其他表单元素以及输入验证

qq_73966534的博客 404

JS实现表单验证输入框提示

JS实现表单验证输入框提示 一、步骤 1、设计好表单页面,在每个输入框后加入强调标签<span> 2、利用事件驱动函数,在输入框上绑定指定事件 3、编写相应函数,使得触发事件时达到理想结果 注: 在编写函数时,需要通过Id信息获取输入框内容如: var userName= do...

Those who achieve great thing do not stick to trifles 4322

jquery价格输入的表单验证怎么做

我最近在做项目时,有人问我怎么写价格输入框的表单验证,不会正则表达式,我的思路其实很简单,其实你无需会正则表达式,你只需知道正则表达式是干什么用得即可,下面我将介绍其做法,基本上照抄我的代码即可,因为价格的表单验证无非就是你输入是数字不是其他什么字母,如果要输入其他什么字母,你可以百度搜索一下,这种正则表达式的表示是什么样子拿过来用即可。 工具/原料 jqu

baidu_36681154的博客 753
上一篇: 用RabbitMQ发送消息
下一篇: 使用JMS进行消息传递
She_lock
博客等级 码龄12年 157粉丝 134原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值