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>

  • 相关阅读:
    Top 10 Product Manager Skills To Boost Your Resume In 2021
    大数据知识梳理
    B端产品如何设计权限系统?
    华三盒式交换机MAC、ARP、Route性能表项参数查询
    中了传说中的挖矿病毒
    SqlServer 2019 事务日志传送
    docker中生成的pdf中文是方框的解决方案
    The Live Editor is unable to run in the current system configuration
    2021 面试题大纲
    五分钟搞定Docker安装ElasticSearch
  • 原文地址:https://www.cnblogs.com/tszr/p/10942896.html
Copyright © 2011-2022 走看看