原生javascript方法checkValidity验证金额转账_js checkvalidity()

body

<!--checkValidity() 方法验证-->
        <div>
          转账金额(1)：<input id="rmb1" type="number" min="1" max="200000" name="RMB1" required="" /> 
        </div> 
         <p style="color: red;" id="rmb1msg"></p>      
       <!--setCustomValidity()方法验证-->
        <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>
1
2
3
4
5
6
7
8
9
10
11

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24