吴裕雄--天生自然 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> ...
随机推荐
- HTML 5 <blockquote><p>的分工与合作
一提到文档标签,大家首先想到的就是p,那如果要实现缩进及间距,还得使用margin,padding及text-indent等css样式. 但现在html5的一个新标签解决了以上所有问题,它可以自缩进和 ...
- Irecycleview 的初次使用简单介绍（irecycleview 下拉刷新上拉加载）
导包 还得加一个maven地址自己也看一下作者git把有详细解释(自己也要导入recycleview的包) 我的例子下载地址 https://www.lanzous.com/i32yzaj impl ...
- C# Winform使用线程,委托定时更新界面UI控件,解决界面卡顿问题（转载）
一.定时执行主界面控件值 1.利用定时器 Thread t = null; private void InitTSJK() { t = new Thread(new ThreadStart(GetDa ...
- CheckBox标签和属性
CheckBox的作用:可以提供复选 下面是我点击按钮查看所选内容的代码:定义按钮监听器,并在onClick方法中调用shoeAlt方法(此方法会在第二块代码定义) Button btn=(Butto ...
- mysql基本知识的总结
Mysql基本sql知识 Navicat快捷方式: 选中当前行 在行尾:shift+home 在行首:shift+end 执行当前行:ctrl+shift+R 复制当前行:ctrl+D 显示所有数据库 ...
- 基于共享内存、信号、命名管道和Select模型实现聊天窗口
问题模型 A.B两个进程通过管道通信,A 进程每次接收到的数据通过共享内存传递给A1进程显示,同理,B进程每次接收到的数据通过共享内存传递给B1进程显示: 对于A.B 进程,采用ctrl+c(实际为S ...
- hibernate保存失败
报错:org.hibernate.jdbc.BdatchedTooManyRowsAffectedException: Batch update returned unexpected row cou ...
- 用CSS编写多种常见的图形
用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...
- JVM探秘：jstack查看Java线程状态
本系列笔记主要基于<深入理解Java虚拟机:JVM高级特性与最佳实践 第2版>,是这本书的读书笔记. jstack命令可以打印Java进程的各个线程堆栈跟踪信息,可以用来查看Java中各个 ...
- 《新标准C++程序设计》3.1.4-3.2（C++学习笔记6）
1.类型转换构造函数 (1)定义 只有一个参数,而且不是复制构造函数的构造函数,一般就可以看作是转换构造函数. 当需要的时候,编译系统会自动调用转换构造函数,建立一个无名的临时对象(或临时变量). ( ...