zoukankan      html  css  js  c++  java
  • 吴裕雄--天生自然 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>

  • 相关阅读:
    数值拓展与函数拓展
    正则小记
    Struts2(三)配置详解
    Struts2(二)工作原理
    Struts2(一)基本配置
    Eclipse新建动态web工程项目出现红叉解决方案
    Spring系列之AOP
    Java动态代理的实现机制
    Spring系列之装配Bean
    Spring系列之基本配置
  • 原文地址:https://www.cnblogs.com/tszr/p/10942896.html
Copyright © 2011-2022 走看看