吴裕雄--天生自然 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> ...
随机推荐
- PHP数组——定义，类型，遍历数组，数组函数
1.定义 $attr=array(); //标准定义方式 $attr=[1,2]; $attr[0]="hello"; ...
- 安卓多个按钮使用一个OnClickListener
安卓studio 3.1 版本编译通过 一个按钮id为bt1 一个按钮Id为bt2 mainactivity 代码入下 package com.example.vmpdump.firstapp; im ...
- Day 25：XML解析
XML解析 xml文件除了给开发者看,更多的情况使用程序读取xml文件的内容.这叫做xml解析 XML解析方式(原理不同) DOM解析 SAX解析 XML解析工具 DOM解析原理: JAXP (ora ...
- 初玩PLSQL连接 Oracle
1. 官网下载合适的[Instant Client] https://www.oracle.com/database/technologies/instant-client/winx64-64-dow ...
- Linux系统发现新恶意软件
导读 安全研究人员发现了一种新的Linux恶意软件,它似乎是由中国黑客创建的,并被用作远程控制受感染系统的手段. 这个恶意软件命名为HiddenWasp,由用户模式rootkit,木马和初始部署脚本组 ...
- c++输出哈夫曼编码
#include<iostream> #include<string> using namespace std; struct huffTree { int parent; i ...
- centos6.7开启linux虚拟机内部错误
如图 这个需要用管理员身份运行就好了 右键----->以管理员身份打开,正常启动
- 【pwnable.kr】cmd2
这道题是上一个cmd1的升级版 ssh cmd2@pwnable.kr -p2222 (pw:mommy now I get what PATH environmentis for :)) 登录之后, ...
- Bug 佛祖镇楼
原文链接:https://www.cnblogs.com/xdp-gacl/p/4198935.html // _ooOoo_ // o8888888o // 88" . "88 ...
- Java 第一次课堂测试总结。
Java 第一次课堂测试总结. 昨天参加了JAVA的开学测试,课上没有完成计算基点的功能,以下是修改完成后的代码. 首先是ScoreInformation类来存储学生信息. //信1805-1 王正 ...