前端实现即时验证效果

原创于 2023-03-26 00:18:24 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #servlet

该HTML代码示例展示了如何使用JavaScript实现对输入金额字段的即时验证，确保用户输入的是数字并且保留两位小数。当输入不符合条件时，会弹出警告并自动聚焦到错误字段，重置值为0.00。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现及时验证效果</title>
    <script type="text/javascript">
        function checkDecimal(element){
        var tmp=element.value.split(".")
        if(!isNaN(element.value)){
        if(tmp.length!=2||tmp[1].length!=2){
        document.myform.aaa.focus();
        //document.getElementByName("name").focus();
        alert("输入金额请保留2位小数！");
        document.getElementById("aaa").value="0.00";
        return false;
        }
        }
        else{
        alert("输入金额必须是数字类型！");
        document.getElementById("aaa").focus();
        document.getElementById("aaa").value="0.00";
        return false;
        }
        }
    </script>
</head>
<body>
<h2>数字即时验证</h2>
<form name="myform">
    <p>金额：<input type="text" id="aaa" name="aaa" value="0.00" onblur="checkDecimal(this);"></p><br>
    <p>合计：<input type="text" id="bbb" name="bbb"></p><br>
</form>

</body>
</html>