吴裕雄--天生自然 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> ...
随机推荐
- ios之开源
a http://code.cocoachina.com b http://code4app.com c http://www.oschina.net/ios/codingList/ d github ...
- 请求接口得到一段markdowm遇到的问题
如图,在console里看得到这段数据 有<br>之类的东东,但是我们用部分富文本解析工具可能会显示不了回车,所以我们可以自己动手: 主要就是利用js的replace方法来把<br& ...
- kali下的截图工具scrot、flameshot和deepin-scrot
对于这几个截图工具,精简好用的应该是deepin-scrot了,这是个和QQ截图有类似功能的Linux截图工具.flameshot的功能是最多的,也很好用,虽然有的功能用不上. 1.scrot安装和使 ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- 初学Java(1)
1.Java基本数据类型: 2.Java的main方法: 被static修饰,类名与文件名相同:void:方法的返回值,无返回值:main方法是程序的入口,有且只有一个: String[] args: ...
- Day 26：Dom4j修改xml
Dom4j:Writing a document to a file import java.io.File; import java.io.FileOutputStream; import org. ...
- 2的n次幂
位运算判断2的n次幂: 举个栗子,n = 8:则二进制表示就为1000,n-1则为 0111 取&刚好等于0 嘿嘿,巧妙吧. 再举个栗子,n = 7: 则二进制为 0111,n-1则为0110 ...
- CGridCtrl只点击规定行中的按钮才弹出对话框
在头文件中添加: afx_msg void OnClick(NMHDR* pNMHDR, LRESULT* pResult); 添加映射:ON_NOTIFY(NM_CLICK, IDC_CUSTOM1 ...
- 洛谷 三月月赛 A
模拟模拟 #include<bits/stdc++.h> using namespace std; inline int ra() { ,f=; char ch=getchar(); ; ...
- 使用HttpURLConnection方式访问接口
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...