Question

我想编写自己的表单验证javascript库，我一直在谷歌上查看如何检测是否单击了提交按钮，但我找到的只是代码，你必须在html中使用on onSubmit="function()"。

我想制作这个javascript，以便我不必触及任何HTML代码，例如添加onSubmit或onClick javascript。

Answer 1

为什么人们总是在没有必要时使用jQuery？为什么人们不能只使用简单的JavaScript？

var ele = /*Your Form Element*/;
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

callback 是您在提交表单时要调用的函数。

关于EventTarget.addEventListener，请查看this documentation on MDN。

要取消原生submit事件（阻止提交表单），请在回调函数中使用.preventDefault()，

document.querySelector("#myForm").addEventListener("submit", function(e){
    if(!isValid){
        e.preventDefault();    //stop form from submitting
    }
});

使用库

收听submit事件

如果由于某种原因您已经确定需要一个库（您已经使用过一个或者您不想处理跨浏览器问题），这里有一个方法列表来监听提交事件共同的图书馆：

的jQuery
```
$(ele).submit(callback);
```
其中ele是表单元素引用，callback是回调函数引用。 Reference

    <iframe width="100%" height="100%" src="http://jsfiddle.net/DerekL/wnbo1hq0/show" frameborder="0"></iframe>

AngularJS（1.x）
```
<form ng-submit="callback()">

$scope.callback = function(){ /*...*/ };
```
非常简单，其中$scope是controller内框架提供的范围。 Reference

阵营

<form onSubmit={this.handleSubmit}>

class YourComponent extends Component {
    // stuff

    handleSubmit(event) {
        // do whatever you need here

        // if you need to stop the submit event and 
        // perform/dispatch your own actions
        event.preventDefault();
    }

    // more stuff
}

只需将处理程序传递给onSubmit道具。 Reference

其他框架/库

请参阅框架文档。

验证

您始终可以在JavaScript中进行验证，但对于HTML5，我们也会进行原生验证。

<!-- Must be a 5 digit number -->
<input type="number" required pattern="\d{5}">

您甚至不需要任何JavaScript！每当不支持本机验证时，您都可以回退到JavaScript验证器。

演示：http://jsfiddle.net/DerekL/L23wmo1L/

Answer 2

请参阅Derek's answer，现在应该是接受的答案。它包括这个答案所包含的所有内容以及更多内容。

（我试图删除这个答案后，Derek更新了他的包含库示例，但是使用绿色复选标记，SO不会让我）

Answer 3

这是在onSubmit发生时调用自己的javascript函数的最简单方法。

<强> HTML

<form>
    <input type="text" name="name">
    <input type="submit" name="submit">
</form>

<强>的JavaScript

window.onload = function() {
    var form = document.querySelector("form");
    form.onsubmit = submitted.bind(form);
}

function submitted(event) {
    event.preventDefault();
}

Answer 4

根据您的要求，您也可以在没有jQuery等库的情况下执行以下操作：

将此添加到您的脑海：

window.onload = function () {
    document.getElementById("frmSubmit").onsubmit = function onSubmit(form) {
        var isValid = true;
        //validate your elems here
        isValid = false;

        if (!isValid) {
            alert("Please check your fields!");
            return false;
        }
        else {
            //you are good to go
            return true;
        }
    }
}

您的表单可能看起来像：

    <form id="frmSubmit" action="/Submit">
        <input type="submit" value="Submit" />
    </form>

Answer 5

使用jQuery：

$('form').submit(function () {
    // Validate here

    if (pass)
        return true;
    else
        return false;
});

如何在javascript中收听表单提交事件？

5 个答案:

使用库

验证