Question

我使用on('submit')检测表单的提交时间，但只有在用户点击提交按钮时才有效。

我使用<button>标签，因此我可以在按钮内放置图像。我知道我可以使用type="submit"的输入并将CSS与图像一起使用，但我想知道另一种jQuery方式。
我正在考虑进行or比较，例如on('submit')或当用户按任何输入字段时输入，但我该怎么做？

$('#form').on('submit', function (e) {

    e.preventDefault();

    var email = $('#email').val();

    function validateEmail(email) { 
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(email);
    } 

});


<form id="form">
    <input id="email" maxlength="64" name="EmailEDIT" type="text" width="100">
    <button id="submitBtn"><img height="30" src="images/fx_demo_button.png" width="74"></button>
</form>

Answer 1

如果用户在其中一个字段中按Enter键，则表单将提交。它将触发与按钮相同的事件。如果没有发生这种情况，代码就会出现问题。

您评论说您的代码不起作用，但确实如此：http://jsfiddle.net/B5pZ4/
我添加的所有内容都是alert(1);，剩下的就是来自此主题的代码

你在eventhandler中定义你的函数，最好分开一下，以防万一你想再次使用那个函数（或者稍微修改它并在两种情况下使用它）。

如果你在代码中分开它，它会更有意义，我也认为这是你遇到的问题：
http://jsfiddle.net/B5pZ4/1/

您实际上只需一行即可使代码正常工作。你在事件处理程序中创建了这个函数（在这种情况下，应该被认为是不好的做法！），但你永远不会调用它。删除函数声明，或在函数下添加：

return validateEmail( email ); // THIS IS BAD PRACTICE AS FIX!

提示：如果你在html5中工作，你可以使用它，浏览器会为你验证：

<input type="email" />

Answer 2

您需要插入一个不可见的输入类型提交才能正常工作。

on（'submit'在单击<按钮>时有效，但在按输入字段</button>时无效

2 个答案: