如何检查输入是否像电子邮件地址然后激活提交按钮？

Question

在激活提交按钮之前，我使用以下代码检查所有表单字段是否不为空。

<script type="text/javascript">
            function checkForm() {
                var cansubmit = false;
                $('form input[type="text"]').each(function (index, element) {
                    if (element.value == "") {
                        cansubmit = true;
                    }
                });
                document.getElementById("uploadButton").disabled = cansubmit;
            }
        </script>

如何编辑此代码，以便在激活提交按钮之前检查电子邮件字段是否包含电子邮件地址？

更新

我将代码更改为此，它似乎工作。 它检查它是否包含@ （而不是作为第一个符号）和. （而不是作为第三个符号）。

这是一个逻辑代码还是应该更容易？

<script type="text/javascript">
            function checkForm() {
                var cansubmit = false;
                $('form input[type="text"]').each(function (index, element) {
                    if (element.value == "") {
                        cansubmit = true;
                    }
                });
                $('form input[type="email"]').each(function (index, element) {
                    if (element.value.indexOf("@") <= 0) {
                        cansubmit = true;
                    }
                    else if (element.value.indexOf(".") <= 2) {
                        cansubmit = true;
                    }
                });
                document.getElementById("uploadButton").disabled = cansubmit;
            }
        </script>

Answer 1

您可以使用此答案中的正则表达式来验证电子邮件地址：

if ((element.value == "" && element.type != "email") || (element.type == "email" && !/([!#-'*+/-9=?A-Z^-~-]+(\.[!#-'*+/-9=?A-Z^-~-]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?(\.[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?)*|\[((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|IPv6:((((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){6}|::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){5}|[0-9A-Fa-f]{0,4}::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){4}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):)?(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){3}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,2}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){2}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,3}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,4}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::)((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,5}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):){0,6}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?::)|(?!IPv6:)[0-9A-Za-z-]*[0-9A-Za-z]:[!-Z^-~]+)])/.test(element.value))) {

Answer 2

使用<input type="email">和inputElement.validity的组合来检查输入是否有效。 文档