Question

我正在进行一项任务，我们需要使用dom 2来验证一些用户输入，但是我很难获得基础知识。在我的教授口音和可怕的写作之间很难解决问题，但我编写了这段代码

<!DOCTYPE html>
<html>
<head>
    <title>Form checking</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        span{
            visibility: hidden;
            color: red;
        }
    </style>
    <script>
        function invalid(event){
            var val = event.target.value;
            var regex = /^\d{3}-\d{3}-\d{4}$/;
            if(val.match(regex))
                document.getElementById("error").style.visibility = hidden;
            else
                document.getElementById("error").style.visibility = visible;
        }
    </script>
</head>
<body>

    <span id="error">Should be in form xxx-xxx-xxxx</span><br>

    Phone Number: <input type="text" id="phoneNumber">

    <script>
        var pn = document.getElementById("phoneNumber");
        pn.addEventListener("blur", invalid, false);
    </script>

</body>
</html>

完全遵循他的笔记，或者尽可能接近我的解密，但我甚至无法让它工作，更不用说尝试完成任务了。有人可以指出它有什么问题吗？请保持简单我只上课2周，所以我几乎什么都不知道。

Answer 1

这是怎么回事：http://jsfiddle.net/6D2cJ/

您忘记在样式可见性上加注引号。它期待一个变量，但没有收到任何东西。在它周围加上引号会产生一个字符串。

此外，您忘记为if和else语句添加大括号。

function invalid(event){
        var val = event.target.value;
        var regex = /^\d{3}-\d{3}-\d{4}$/;
if(val.match(regex)) {
            document.getElementById("error").style.visibility = "hidden";
}
else {
            document.getElementById("error").style.visibility = "visible";
    }
}

Answer 2

这里你去..修复一些语法错误和其他东西：

function invalid(event){
    var val = event.target.value;
    var regex = /^\d{3}-\d{3}-\d{4}$/;
    if(!val.match(regex)){
       document.getElementById("error").style.visibility = 'visible';
    } else {
       document.getElementById("error").style.visibility = 'hidden';
    }
}
  var pn = document.getElementById("phoneNumber");
  pn.addEventListener("blur", invalid, false);

工作演示：

http://jsfiddle.net/x84J2/24/

Javascript dom 2基础知识

2 个答案: