<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" max="300" required>

<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 或大于300，会提示错误信息。</p>

<p id="demo"></p>

<script>

function myFunction() {

    var inpObj = document.getElementById("id1");

    if (inpObj.checkValidity() == false) {

        document.getElementById("demo").innerHTML = inpObj.validationMessage;

    } else {

        document.getElementById("demo").innerHTML = "输入正确";

    }

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" max="100">

<button onclick="myFunction()">验证</button>

<p>如果输入的数字大于 100 ( input 的 max 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>

function myFunction() {

    var txt = "";

    if (document.getElementById("id1").validity.rangeOverflow) {

        txt = "输入的值太大了";

    } else {

        txt = "输入正确";

    }

    document.getElementById("demo").innerHTML = txt;

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<p>输入数字并点击验证按钮:</p>

<input id="id1" type="number" min="100" required>

<button onclick="myFunction()">验证</button>

<p>如果输入的数字小于 100 ( input 的 min 属性), 会显示错误信息。</p>

<p id="demo"></p>

<script>

function myFunction() {

    var txt = "";

    var inpObj = document.getElementById("id1");

    if(!isNumeric(inpObj.value)) {

        txt = "你输入的不是数字";

    } else if (inpObj.validity.rangeUnderflow) {

        txt = "输入的值太小了";

    } else {

        txt = "输入正确";

    }

    document.getElementById("demo").innerHTML = txt;

}

// 判断输入是否为数字

function isNumeric(n) {

    return !isNaN(parseFloat(n)) && isFinite(n);

}

</script>

</body>

</html>

吴裕雄--天生自然 JAVASCRIPT开发学习： 验证 API的更多相关文章

  1. 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> ...

  3. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄--天生自然 JAVASCRIPT开发学习：条件语句

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习：对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄--天生自然 JAVASCRIPT开发学习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习：函数定义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄--天生自然 JAVASCRIPT开发学习： 正则表达式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. android studio 入门坑

    安装 android studio,碰到下面这个图片,直接跳过. 安装时候,选择自定义设置,里面可以配置 sdk 的存放位置. 新建工程后,gradle sync 比较慢,可以 修改工程中的 buil ...

  2. sprintf与sscanf用法举例

    一.sscanf 从tmp中读取a,b,c. int main(){ ]; int a; double b; ]; while(gets(tmp) != NULL){ sscanf(tmp, &quo ...

  3. asp.net mvc3用file上传文件大小限制问题

    在Windows2008下,如果上传比较大的文件,可能会出现404错误,(请求筛选模块被配置为拒绝超过请求内容长度的请求). 可通过如下方法解决: 打开URTracker根目录下的web.config ...

  4. maven的概念模型及maven坐标

     1.概念模型 项目对象模型:一个maven工程有一个pom.xml文件,通过pom.xml文件定义项目的坐标.项目依赖.项目信息.插件目标等. 依赖管理系统:通过maven的依赖管理对项目所依赖的j ...

  5. 【STM32H7教程】第52章 STM32H7的LTDC应用之点阵字体和字符编码（重要）

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第52章       STM32H7的LTDC应用之点阵字体和 ...

  6. Python 中 unittest 框架加载测试用例的常用方法

    unittest 当中为我们提供了许多加载用例的方法,这里说下常用的两种方法...推荐使用第二种 第一种加载测试用例的方法:使用加载器加载两个模块 需要把所有的模块加载到套件中 那么就可以自动的运行所 ...

  7. 《新标准C++程序设计》3.6-3.7（C++学习笔记9）

    一.成员对象和封闭类 (1)定义 一个类的成员变量如果是另一个类的对象,就称之为“成员对象”. 包含成员对象的类叫封闭类. (2)封闭类构造函数的初始化列表 在构造函数中添加初始化列表的写法: 类名: ...

  8. Essay写作没逻辑不要慌，掌握这几点即可

    今天文章的内容,真的是很多很多留学生的最大的问题,没有之一:逻辑.是的,你没有看错,也不用惊讶.大家的essay写作得分不高,很多时候不是因为语言问题.排除很多细节表达的不足,更让教授头疼的居然是:内 ...

  9. Elasticsearch 教程

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...

  10. 10 —— node —— 获取文件在前台遍历

    思想 : 前台主动发起获取 => ajax 1,前台文件 index.html <!DOCTYPE html> <html lang="en"> &l ...