<!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. 字符设备驱动之LED驱动

    实现 ①编写驱动框架 ②编写硬件实现代码 (在Linux系统下操作硬件,需要操作虚拟地址,因此需要先把物理地址转换为虚拟地址 ioremap()) 如何实现单个灯的操作: 实现方法之一--操作次设备号 ...

  2. 一个有意思的html验证码： namesilo验证码

    买域名的时候看到的一个验证码,感觉蛮有意思的(https://www.namesilo.com/create_account.php),这个质感看上去就不一样: 查看页面源码,果然这个验证码是用htm ...

  3. 原生searchView 自定义样式

    https://www.jianshu.com/p/f1fe616d630d 去除搜索框中的图标 <style name="SeachViewActivityTheme" p ...

  4. IP地址 网络地址 子网掩码

    提纲 (1)IP地址 (2)网络地址 (3)子网掩码     IP地址=网络地址+主机地址,图1中的IP地址是192.168.100.1,这个地址中包含了很多含义.如下所示:网络地址(相当于街道地址) ...

  5. WTL之VS2013环境搭建

    新版博客已经搭建好了,有问题请访问 htt://www.crazydebug.com 从国外回来,在老家入职了新公司,做c++开发,刚到新公司要熟悉公司的项目代码,目前公司在做一个主播聚合平台,界面采 ...

  6. [ cocos2d-JS ] 创建项目命令

    cocos new HelloJS -l js -p com.neworigin.HelloJS -d D:\0-Game\cocosJS-project

  7. Spring课程 Spring入门篇 7-3 advice扩展

    课程链接: 1 解析 1.1 advice中aspect 切面传参 1.2 通知参数名称——argNames属性, 参数为 JoinPoint.ProceedingJoinPoint.JoinPoin ...

  8. thinkphp调用sqlserver储存过程返回多个结果集

    首先安装扩展 windows 分为两个步骤 找到对应自己PHP版本的pdo扩展,下载解压出来,并且在php.ini里面启用扩展,需要注意的问题是php版本以及是否为安全版本 下载 ODBC Drive ...

  9. 四十五、SAP中Message的管理

    一.事务代码SE91 二.输入相关名字,点击创建 三.输入内容 四.定义成本地对象 五.在消息中添加一条短文本 六.我们代码如下 七.执行

  10. postman测试带有json数据格式的字段

    测试六个字段 普通字段: ModelCode 普通字段: MmodelCode 普通字段: ModelTagKey 普通字段: ModelTagValue 普通字段: ModelTagType jso ...