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>
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;
}