点击时的 JavaScript

Question

我正在尝试对这个电话号码进行地面验证，但我在使用 onclick 方法时遇到问题，为什么它不起作用？

function validatePhone(){
    var phone  = document.getElementById("phone1").value;
    if(phone.length === 0) {
        alert("phone number is required.");
    }
}

<form>
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="submit" value="send message" onclick="validatePhone()" />
</form>

Answer 1

将输入类型更改为 button，因为如果类型为 submit validatePhone() 将永远无法到达:

function validatePhone()
{
    var phone  = document.getElementById("phone1").value;

    if(phone.length === 0) {
        document.getElementById("result").textContent ="phone number is required.";
    }
}

<form>
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="button" value="send message" onclick="validatePhone()" />
</form>
<span id='result'></span>

或者你可以使用onsubmit :

function validatePhone(e)
{
    e.preventDefault();

    var phone  = document.getElementById("phone1").value;

    if(phone.length === 0) {
        document.getElementById("result").textContent ="phone number is required.";

        return false;
    }
}

<form onsubmit="validatePhone()"
    <p>Please enter your phone number below:</p>
    <input id="phone1" placeholder="(000)000-0000" />
    <input type="submit" value="send message" />
</form>
<span id='result'></span>