<!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. DCGAN生成目标训练图片

    前言: GAN的原理很简单,但是它有很多变体,如:DCGAN.CycleGAN.DeblurGAN等,它们也被用在不同地方,本文将用到DCGAN来生成头像图片,可以做到以假乱真的地步. 1.首先调用程 ...

  2. 这台计算机上缺少此项目引用的 NuGet 程序包。使用“NuGet 程序包还原”可下载这些程序包

    将项目复制到其地方的时候编译会报错,按照官网方法也不行,从网上查了一个有用的方法如下 打开CSPROJ文件.删除如下代码,  <Import Project="..\packages\ ...

  3. node重点 模块

    node模块 1.全局模块(对象)(像js中的window document) 定义:何时何地都可以访问,不需要引用 1.process.env 环境变量 计算机属性 高级系统设置 高级 环境变量 作 ...

  4. CodeForces - 862B Mahmoud and Ehab and the bipartiteness（二分图染色）

    题意:给定一个n个点的树,该树同时也是一个二分图,问最多能添加多少条边,使添加后的图也是一个二分图. 分析: 1.通过二分图染色,将树中所有节点分成两个集合,大小分别为cnt1和cnt2. 2.两个集 ...

  5. CSS - 设置placeholder样式

    input::placeholder {         font-size: 12px;         font-family: Arial;         letter-spacing: 5p ...

  6. Python 操作 sqlite

    代码示例 #导入sqlite3库 import sqlite3 #连接数据库 conn = sqlite3.connect("customers.db") #创建表,主键id自增 ...

  7. Python+Selenium中级篇之8-Python自定义封装一个简单的Log类《转载》

    Python+Selenium中级篇之8-Python自定义封装一个简单的Log类: https://blog.csdn.net/u011541946/article/details/70198676

  8. hibernate保存失败

    报错:org.hibernate.jdbc.BdatchedTooManyRowsAffectedException: Batch update returned unexpected row cou ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-qrcode

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

  10. springmvc无法访问JS，CSS等文件

    配置好web.xml中的dispatchservlet后,js,css,都不能正常显示 web.xml配置文件 <!-- 核心控制器 --> <servlet> <ser ...