原生javascript方法checkValidity验证金额转账

╰半夏微凉° 2023-06-13 04:38 1阅读 0赞

**body**

<div>
              转账金额(1)：<input id="rmb1" type="number" min="1" max="200000" name="RMB1" required="" /> 
            </div> 
             <p style="color: red;" id="rmb1msg"></p>      
           
            <div>
              转账金额(2)：<input id="rmb2" type="number" min="1" max="200000" name="RMB2" /> 
            </div> 
             <p style="color: red;" id="rmb2msg"></p> 
            <button onclick="LoginCheckValidity()" type="button" style="height: 40px; width: 100px; color: black; font-size: 12px;">转账</button>

**script**

/*约束验证 DOM 方法*/
    function LoginCheckValidity() {
        var txt = "";   /*1.checkValidity() 方法验证*/
        var rmb1 = document.getElementById("rmb1"); // 获得账号输入框的内容
        if (rmb1.checkValidity() == false) {
            txt = rmb1.validationMessage;
        } else {
            txt = "转账成功！";
        }
        document.getElementById("rmb1msg").innerHTML = txt;
        /*2.setCustomValidity()方法验证*/
        var rmb2 = document.getElementById("rmb2"); // 获得金额输入框的内容
        rmb2.setCustomValidity(""); // 取消自定义提示的方式
        if (rmb2.value == null || rmb2.value == "") {
            rmb2.setCustomValidity("请输入金额！");
        } else if (rmb2.validity.rangeUnderflow) {
            rmb2.setCustomValidity("金额不小于1元！");
        } else if (rmb2.validity.rangeOverflow) {
            rmb2.setCustomValidity("金额不大于200000万！");
        } else {
            rmb2.setCustomValidity("转账成功！");
        }
        document.getElementById("rmb2msg").innerHTML = rmb2.validationMessage;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191113181823685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70