Question

我想使用javascript验证我的手机号码，我的代码是：

function checkLength(){
    var textbox = document.getElementById("textbox");
    if(textbox.value.length == 10){
        alert("success");
    }
    else{
        alert("mobile number must be 10 digits long");
        textbox.focus();
        return false;
    }
}

并且调用函数是： <input type="text" name="Contact-No." id="textbox" required >Contact(Mobile No.) <input type="submit" value="Submit" onclick="checkLength()">

一切正常，但在显示警告信息后，它应该返回同一页面，但它会带我到其他一些空白页面。

Answer 1

1）您的表单需要阻止默认的提交操作，这样如果您发现错误，表单实际上没有提交..您应该挂钩表单中的onsubmit事件。

假设您已在页面上包含jQuery 1.7+的示例

HTML

<form id="myform" action="/">
  <input type="text" name="Contact-No." id="textbox" />   
  Contact(Mobile No.)<br><br>
  <input type="submit" value="Submit" id="submit" />
</form>

的javascript

$("#myform").on("submit",function(e){
    if(checkLength()==false){
        alert('prevent form submit');
        e.preventDefault();
    }else{
        alert('form submits as normal');
    }
});

function checkLength(){
    var textbox = document.getElementById("textbox");
    if(textbox.value.length == 10){
        alert("success");
        return true;
    }
    else{
        alert("mobile number must be 10 digits long");
        textbox.focus();
        return false;
    }
}

示例：

http://jsfiddle.net/Lqbn6unp/

Answer 2

从按钮中移除onClick事件，并将onSubmit添加到<form..>。类似于<form onSubmit='return checkLength();>'。

Answer 3

正如其他地方所指出的，监听器应该在表单的提交处理程序上，因为可以在不按提交按钮的情况下提交表单。此外，您可以将表单控件引用为表单的命名属性，这比使用 getElementById 更有效，并且意味着控件不需要ID。

因此，从侦听器传递对表单的引用，例如

表格形式：

<form onsubmit="return checkLength(this)" ... >
  <input type="text" name="Contact-No." required >Contact(Mobile No.)

然后在函数中：

function checkLength(form) {
    var textbox = form['Contact-No'];

    if (textbox.value.length == 10) {
        alert("success");

    } else {
        alert("mobile number must be 10 digits long");
        textbox.focus();
        return false;
    }
}

在javascript中验证手机号码

3 个答案: