6.5 标识有问题的字段

  • 与原书也不一样,主要还是获取到有问题的元素,修改其 CSS;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function validateForm() {
            var x = document.forms["myForm"]["pwd1"];
            var y = document.forms["myForm"]["pwd2"];
            if (x.value != y.value) {
                x.className = "red";
                y.className = "red";
                return false;
            }
            x.className = "black";
            y.className = "black";
        }
    </script>
    <style>
        .red {
            border-color: red;
        }
        .black {
            border-color: black;
        }
    </style>
</head>
<body>
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
    <label>名字: <input type="text" name="pwd1" required></label>
    <label>密码: <input type="text" name="pwd2" required></label>
    <input type="submit" value="提交">
</form>
</body>
</html>