Numeric Inputs

Numbers are even easier to validate than text. For number input types, the HTML5 spec gives youattributes like minmax, and step. Each of these do pretty much what you would expect.

min and max set the minimum and maximum values that the arrows in the input will allow. stepsets the increments for between possible values. There’s also value, which sets the starting value of the input.

Of course, you’ll probably notice that users can still type whatever number they want into numeric inputs. If you want to really limit possible values, consider a range instead.

Range Inputs

The range input type creates a slider on the page. It also has minmaxstep and value attributes. If you want to display the current value of the range when it changes, you’ll need to use some JavaScript to pull the value from the range. Here's an example:

  // grab <input id="range-example" type="range" min="0" max="5" step="1"> from the page
var rangeInput = document.querySelector('input#range-example'); // grab <p id="output"></p> to display the output
var output = document.querySelector('p#output'); // update the display when the range changes
rangeInput.onchange = function() {
output.innerHTML = this.value;
};
<input type=number>
<input type=number min=100 max=999 step=5>

Numeric Validation的更多相关文章

  1. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  2. Adding Validation to our Album Forms 添加类属性的一些验证特性

    Adding Validation to our Album Forms We’ll use the following Data Annotation attributes: Required – ...

  3. laravel的validation 中文 文件

    使用方法: 直接替换resources/lang/en/validation.php中的内容 <?php return [ 'unique' => ':attribute 已存在', 'a ...

  4. laravel 验证机制validation

    Laravel 中 validation 验证 返回中文提示 全局设置 自己建一个zn文件夹,然后把en的4个文件全复制过去,修改validation.php的代码为下面的内容,然后在app.php修 ...

  5. spring boot中使用javax.validation以及org.hibernate.validator校验入参

    这里springboot用的版本是:<version>2.1.1.RELEASE</version> 自带了hibernate.validator,所以不用添加额外依赖 1.创 ...

  6. Laravel 中 validation 验证 返回中文提示 全局设置

    <?php return [ /* |-------------------------------------------------------------------------- | V ...

  7. laravel的Validation检索验证错误消息

    基本用法 处理错误消息 错误消息和视图 可用的验证规则 有条件地添加规则 自定义错误消息 自定义验证规则 基本用法 Laravel提供了一个简单.方便的工具,用于验证数据并通过validation类检 ...

  8. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  9. [转]Excel导入异常Cannot get a text value from a numeric cell解决

    原文地址:http://blog.csdn.net/ysughw/article/details/9288307 POI操作Excel时偶尔会出现Cannot get a text value fro ...

随机推荐

  1. c++实现简单计算器

    帮一个同学写的,非计算机类专业,应付交差,也没什么功能,两个数的加减乘除运算,以及三角函数的运算.要求用到模板.运算符重载和异常处理. 一直以来都是用的java,没怎么用过c++,就当是复习了一下c+ ...

  2. php中命名空间的使用

    简单使用 命名空间主要解决函数/类冲突的问题.由于PHP中中不允许函数重载,所以我们要使用的到命名空间的.先看一个简单的例子. <?php namespace A; public functio ...

  3. 改善C#程序的建议3:在C#中选择正确的集合进行编码

    要选择正确的集合,我们首先要了解一些数据结构的知识.所谓数据结构,就是相互之间存在一种或多种特定关系的数据元素的集合.结合下图,我们看一下对集合的分类. 集合分类 在上图中,可以看到,集合总体上分为线 ...

  4. “耐撕”团队2016.04.14站立会议

    1. 时间 : 19:20--19:40  共计20分钟 2. 人员 : Z   郑蕊 * 组长 (博客:http://www.cnblogs.com/zhengrui0452/), P 濮成林(博客 ...

  5. ansible 使用方法

    免密钥方式登陆: [root@yizhen ~]# ssh-keygen -t rsa[root@yizhen ~]# ssh-copy-id -i ~/.ssh/id_rsa.pub 192.168 ...

  6. java 关键字 transient

    一个对象实现了Serilizable 接口,该对象就可以被序列化. 然而在实际开发工程中,我们会遇到,这个类的有些属性不需要序列化,比如包含用户的敏感信息(如密码),为了安全起见,不希望在网络操作(主 ...

  7. Java-clone浅/深复制

    Object中的clone方法为复制当前对象 protected native Object clone() throws CloneNotSupportedException; 想要使用这个方法需要 ...

  8. Rootkit Hacking Technology && Defence Strategy Research

    目录 . The Purpose Of Rootkit . Syscall Hijack . LKM Module Hidden . Network Communication Hidden . Fi ...

  9. java将数据写入到txt文件中(txt有固定的格式)

    java将数据写入到txt文件中,这个应该对于学过java I/O的人来说是很简单的事情了,但是如果要将数据以固定的格式写入到txt文件中,就需要一定的技巧了. 这里举个简单的例子,以供参考: 比如我 ...

  10. HD 1011 Starship Troopers(树上的背包)

    Starship Troopers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...