Question

我正在做基于phonegap的应用程序。我试图用外部javascript文件验证我的输入。但是获取错误validateForm没有在HTMLFormElement.onclick中定义。我的代码出了什么问题？

HTML

<div data-role="page" id="page1">

    <div data-role="header">
        <a href="#pageMain" class="ui-btn ui-icon-back">Back</a>
        <h2>Add New</h2>
    </div>
    <!-- main -->
    <div data-role="main" class="ui-content">

        <form name="myform" onclick="return validateForm()" method="post">
        Name : <input type="text" name="myname" id="my_name" placeholder="Enter Your Name" >
        <button type="button" id="but_submit">Submit</button>
        </form>


    </div>
    <!-- footer -->
    <div data-role="footer">
        <h2>mine</h2>
    </div>

</div>

来自外部javascript的代码

function validateForm(){
var x = document.forms["myform"]["myname"].value;
if (x==null || x==""){
    alert("enter name");
    return false;
} else{
    return true;
}
}

Answer 1

使用onsubmit，并通过从事件处理程序传递 this ，您可以将其用于document.forms[....]

HTML

<form name="myform" onsubmit="return validateForm(this)" method="post">

脚本

function validateForm(theform){
    var x = theform["myname"].value;
    if (x==null || x==""){
        alert("enter name");
        return false;
    } else{
        return true;
    }
}

通过使用事件监听器，它可以更加可维护（并且不引人注目）

HTML

<form name="myform" method="post">

脚本

window.addEventListener('load', function() {  /* fires when page been loaded */

    document.querySelector('[name="myform"]').addEventListener('submit', function(e) {
        var x = e.target["myname"].value;
        if (x==null || x==""){
            alert("enter name");
            return false;
        } else{
            return true;
        }
    });

});

Answer 2

您应该使用onchange事件，因为onclick触发后才有机会在输入中实际写入内容。
这样，您可以在值更改后处理验证，而不是等待提交表单。

或者，如果您想在提交之前进行验证，可以使用LGSon建议的onsubmit事件。

function validateForm() {
  var x = document.forms["myform"]["myname"].value;
  if (x == null || x == "") {
    alert("enter name");
    return false;
  } else {
    console.log(true, x);
    return true;
  }
}

<form name="myform" onchange="return validateForm()" method="post">
  Name : <input type="text" name="myname" id="my_name" placeholder="Enter Your Name">
  <button type="button" id="but_submit">Submit</button>
</form>

Answer 3

使用以下HTML代码：

<form name="myform" onsubmit="return validateForm()" method="post">
        Name : <input type="text" name="myname" id="my_name" placeholder="Enter Your Name" >
        <button type="button" id="but_submit">Submit</button>
        </form>

如何使用外部JavaScript验证输入？

3 个答案: