图文详解 表单的验证方式

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量1.8k 收藏
点赞数 3
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45027204/article/details/105178911
版权

HTML5的input元素验证方式包括：

自动验证方式

HTML5表单自动验证主要是通过表单元素的属性设置来实现的。在图文详解 新的input类型和属性一文中介绍的input元素公用属性required以及pattern，就是分别用来验证输入框是否为空以及输入信息是否符合设定正则表达式规则的。一旦input元素设置了自动验证相关的属性，在表单提交时就会自动对输入内容进行校验，并对有校验不通过的信息给出相应的错误提示信息。
除了上面介绍的required和pattern属性外，HTML5中还有以下两个属性可用于自动验证。

1．min属性和max属性

min属性和max属性主要应用于数值类型或日期类型的input元素，用于限制输入框所能输入的数值范围。例如，对numer类型的input元素设置min和max属性，示例代码如下。

 <!DOCTYPE html>
<html>
<meta charset="gb2312" />
<form>
	<fieldset>
		<legend>
			请输入数字信息
		</legend>
		<input type="number" min="0" max="100">
		<input type="submit" value="提交">
	</fieldset>
</form>
</html>

在这段代码中，设置了number类型的input元素允许输入数值范围为0～100，保存上述代码并在浏览器中运行，当在输入框中分别输入“199”并单击“提交”按钮时，得到错误提示信息如图。
显示效果
在这里插入图片描述

2．step属性

step属性主要应用于数值型或日期型input元素，用于设置每次输入框内数值增加或减少的变化量。例如，对number类型的input元素设置step属性，示例代码如下。

最低0.47元/天 解锁文章
芬贝
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5新增的input属性你知道多少？
丑小鸭变黑天鹅的博客
03-16 1404
HTML5新增的input属性你知道多少？1、必要（Required）属性2、自动对焦（Autofocus）属性3、pattern 属性4、multiple 属性5、min、max 和 step 属性6、 占位符（placeholder属性）7、电子邮件输入8、list 属性9、height 和 width 属性 1、必要（Required）属性 表单允许新的必要属性，规定是否某个特定的输入是必要的。你可以依据自己写代码的偏好，用下面两种不同方式来声明这个属性： required 属性适用于以下类型的 &l
自定义表单验证方法的使用
my466879168的博客
06-15 512
自定义表单验证方法 自定义表单验证方法适合于简单的验证： passwordAgain: { validator: (rule, value, callback) => { console.log(value) if (value === "" || value === undefined || value === null) { callback(new Error(" ")); } else if (this.emailForm.password != "
html5 input 最小值,HTML <input>标签 min 属性
weixin_39613291的博客
06-03 959
HTML 标签 min 属性定义和用法min 属性规定 元素的最小值。提示：min 属性与max属性配合使用，可创建合法值范围。注意：max 和 min 属性适用于以下 input 类型：number、range、date、datetime、datetime-local、month、time 和 week。浏览器支持Internet Explorer 10、Opera、Chrome 和 Sa...
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 404
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
html中min属性,HTML的min属性和max属性怎么用？
weixin_29962473的博客
06-04 1050
HTML min属性用于指定度量的下限，max属性用于指定度量的上限；min属性的值必须小于max属性的值。min属性的默认值为0；如果没有规定 max 属性的值，则默认值是 1。max属性与min属性可以用于和元素，一起使用来规定了度量的完整范围。HTML 的min属性和max属性语法：示例：在input元素中使用min属性和max属性input{width: 100px;}HTML input...
el-input设置max、min无效的解决方案
qq_71214810的博客
03-14 3894
max和min主要是用于设置最大值和最小值的，但是呐，如果你只使用max及min是没有效果的 不用el-form表单来验证处理的情况下，举例了下面几种方式：
input限制只能输入数字并限制长度
wwppp987的博客
08-04 1745
当我们使用类型number的input输入框的时候，我们可能需要限制输入的位数，这个时候通常会想到maxlength，但是maxlength是在number类型的时候是不支持的，下面是一些解决这种问题的方法。 1）max和min max和min是number输入框所支持的，这样如果我们要限制输入11位的手机号码，就可以用如下代码 <input type="number" max="999...
表单验证概述
轻云流火 chitry
07-07 525
//对于检查用户输入的错误和遗漏的必选项，JavaScript是一种十分便捷的方法   Javascript的最大特点之一是它能够处理表单，评估用户输入数据的有效性。这时的有效性检查在浏览器运行的客户机上完成，具有速度快、效率高的特点。 表单的验证原理：JS验证，由于验证数据不需要提交给服务器，就不会加重服务器的负载。若是验证通过则提交服务器处理，不成功则反馈给用户
图文详解 新的input类型和属性
01-08
在HTML5中，新增了许多input类型的输入框，以及一些实用的属性，这极大地增强了网页表单的交互性和数据验证能力。下面将详细讲解这些新特性。 1. **email类型**： email类型的input元素用于接收用户的电子邮件地址...
整合struts+hibernate图文详解.doc
07-10
在`login.jsp`中，使用Struts标签库来创建表单，包括`<html:form>`、`<html:text>`等元素，以便与Action和Form Bean交互。 整合Struts和Hibernate的过程主要是为了让Struts负责处理用户请求和控制流程，而Hibernate...
Python Django的安装配置教程图文详解
09-19
Django 的核心功能包括数据库管理、用户认证、表单处理以及内置的开发服务器，使得开发者可以快速验证和调试代码。 **一、安装 Django** 1. **Python 环境确认** 在开始安装 Django 之前，确保你的计算机上已经...
解决Django一个表单对应多个按钮的问题
01-20
4. **创建Django项目图文实例详解**：创建Django项目涉及设置环境、创建项目、安装依赖、创建应用、编写视图、配置URL以及创建模板等步骤。 5. **由面试题加深对Django的认识理解**：通过解答常见的Django面试问题...
表单验证的实现方法
n34886746的博客
06-01 8504
简单的表单验证 两种验证方式： 1.在表单提交时进行验证，sumbit时 2.在表单控件失去焦点时进行验证 表单验证逻辑一般写在表单提交之前，html5也新增了表单验证形式，表单验证可以使用正则表达式 ...
jQuery-表单验证使用方法
weixin_66602553的博客
04-23 2454
目录一、表单验证单词二、思维导图三、表单验证的使用方法四、复选框全选和取消全选 一、表单验证单词 二、思维导图 三、表单验证的使用方法 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></s
el-input输入值设置最大值、最小值问题
热门推荐
E_li_na的博客
10-22 2万+
如果使用max、min属性，则必须同时加上与type=“number”。 设置type="number"样式，输入框尾部会出现一个上下箭头，min和max只能控制用箭头输入的最大值最小值，对键盘打字输入是限制不住的。 如果需要限制input输入的值，最实用的做法是给input绑定一个change事件，在change事件中用正则判断。这里会涉及到一个type=”number”同时正则判定，对"e"失效的问题。（要看怎么理解失效）,可以同时watch一下el-input绑定的model 设置了type=”num
【Element-ui】表单验证的使用--详细讲解
Triumph_light的博客
04-19 1001
总结一下表单验证的使用，如果后续还有骚操作会继续添加 对有帮助的同学，希望三连一下，或者关注我，我们一起学习进步！！！ 自定义表单验证 第一步：为form-item添加prop属性(prop属性值为校验规则的字段名) 第二步：为form添加rules属性(rules属性值为校验规则) 第三步：定义rules 注：这里的rules必须定义在data里面的return里 第四步：定义自己的校验规则 注：这里的校验规则必须写在data里面的return的前面 自己的项目代码案例： data () {
iView中InpuNumber限定正整数，max min无效问题
BiangBaing的博客
11-16 1600
原文链接：[https://blog.csdn.net/onceking/article/details/109218995] 地址：https://blog.csdn.net/onceking/article/details/109218995 1、max min无效 使用:active-change=“false” 可以暂时解决 2、需求限定不能为小数 :formatter="value => ${parseInt(value)}" ...
欧洲图文电视检验详解：DVB标准与功能验证方法
欧洲图文电视检验细则是厦门华侨电子股份（企业）有限公司质量管理部整机二课为适应日益增长的欧洲市场平板电视和CRT电视需求，制定的一份详细的检验标准。该文件旨在提供权威且完备的检验规范，确保产品的图文电视...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值