吴裕雄--天生自然 JAVASCRIPT开发学习： 验证 API
<!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的更多相关文章
- 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： 表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：对象 实例（2）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：条件语句
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：对象
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：函数定义
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： this 关键字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习： 正则表达式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Dive into re Module in Python
Dive into RE in Python Standard re module in python is powerful to handle text manipulation,such as ...
- pyhton scipy最小二乘法（scipy.linalg.lstsq模块）
最小二乘法则是一种统计学习优化技术,它的目标是最小化误差平方之和来作为目标J(θ)J(θ),从而找到最优模型. 7. SciPy最小二乘法 最小二乘法则是一种统计学习优化技术,它的目标是最小化误差平方 ...
- iPhone Safari下iframe不显示滚动条无法滚动的解决方法。iframe的坑！
<div class="dataTables_wrapper" style="-webkit-overflow-scrolling:touch;overflow:a ...
- CSS隐藏商务通等内容
CSS隐藏商务通等内容<style>#qiao-wrap{display:none !important;} </style>
- 数据结构——KMP（串）
KMP一个非常经典的字符串模式匹配算法,虽然网上有很多kmp算法的博客,但是为了更好的理解kmp我还是自己写了一遍(这个kmp的字符串存储是基于堆的(heap),和老师说的定长存储略有不同,字符串索引 ...
- UVA - 1572 Self-Assembly（图论模型+拓扑排序）
题意:判断利用给出的正方形是否能拼接出无限延伸的结构. 分析:正方形上的字母看做点,正方形看做有向边. 例如: 若上下两个正方形能拼接,需要B+~C+是个有向边. 对输入的处理是:把A+,A-分别映射 ...
- IPv6-isis配置
①:ipv6 unicast-routing——开启IPv6路由功能 ②:router isis word——开启ISIS进程 ③:is-type——可以修改路由器ISIS等级 ④:进入接口 ⑤:启用 ...
- 面向对象设计思想和MVC设计模式
虽然之前学习Java时有接触过面向对象的设计思想,但因当时Java没学好.所以导致这两天讲php的面向对象设计时,感到没有头绪,这也反应了我练习少和逻辑能力的不足.而MVC设计思想 面向对象就是要将系 ...
- 一百零六、SAP的OOP面向对象编程，OO-ALV的简介
面向对象编程,如图 基本概念: 1.对象(Object)是一个现实实体的抽象.一个对象可被认为是一个把数据(属性)和程序(方法)封装在一起的实体,这个程序产生该对象的动作或对它接受到的外界信号的反应. ...
- .net core项目iis10上出现 HTTP 错误 500.19，错误代码：0x8007000d
文件权限更改,配置文件更改,IIS重装重启,各种办法都不管用,下面是解决办法: 看错误信息里:模块:IIS Web Core 打开IIS: 模块列表中是否缺少红框里的两个组件(我这是已经安装好的截图) ...