吴裕雄--天生自然 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> ...
随机推荐
- linux安装postgresql数据库
本文提供数据库安装脚本,有部分需要优化,就是脚本中的方法执行存在前后依赖,但是代码里面没有对上一个执行结果进行判断,如果提供的路径和安装包没有问题,脚本能够正常执行 #!/bin/bash # ins ...
- Fréchet Inception Distance（FID）
计算 IS 时只考虑了生成样本,没有考虑真实数据,即 IS 无法反映真实数据和样本之间的距离,IS 判断数据真实性的依据,源于 Inception V3 的训练集 ------ ImageNet,在 ...
- ApplicationListener监听使用ContextRefreshedEvent事件类型会触发多次
@Componentpublic class TestApplicationListener implements ApplicationListener<ContextRefreshedEve ...
- 《ES6标准入门》(阮一峰)--4.字符串的扩展
1.字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点. "\u0061" ...
- Java之集合
前言: 在写程序当中,集合会经常使用,今天听了马老师的课,写一些自己的总结 正文: 集合最重要的就是一个图,一个类,三个知识点,六个接口 说到图就是上面的图,这个图可以帮我们理解这些接口的继承关系 1 ...
- QT进行多传感器(执行器)的编程框架
物联网的发展使得现今使用越来越广泛,对于多传感器进行管理变得十分有必要.使用传统的过程管理,很明显很容易陷入管理的混乱, 造成信息的不同步.使用面向对象的管理,以及对物理传感器在程序中进行抽象,并且建 ...
- Elasticsearch开启试用x-pack license
一.Elasticsearch 6.7.2开启trial x-pack license:x-pack的license试用期只有30天 1.ES6.7.2版本默认已经安装了x-pack插件,这里就没有 ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- 自定义spark UDAF
官网链接 样例代码: import java.util.ArrayList; import java.util.List; import org.apache.spark.sql.Dataset; i ...
- python中的__code__
简单总结几个常用的__code__的用法: (1)func.__code__.co_argcount:返回函数的参数个数,这里的参数个数不包含*args与**kwargs,具体来讲就是*args前的参 ...