Question

基本上我试图使用jQuery等进行表单验证。我试图使用event.preventDefault（）;用于防止表单提交默认方式。

它似乎无法正常工作。

我也在尝试制作一个if语句来检查它是否是一个有效的电子邮件地址，但由于某种原因它会出现语法错误。

如何修复这些问题？

<!DOCTYPE html>
<html>
<head>
    <title>jQuery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

<style>
    #wrapper {
        margin: 0 auto;
        width: 600px;
        font-family: helvetica;
        font-size: 1.2em;
    }

    input {
        width: 300px;
        height: 30px;
        padding: 7px;
        border-radius: 5px;
        font-size: 1.2em;
        border: 1px solid grey;
        margin-bottom: 10px;
    }

    label {
        width: 200px;
        float: left;
        padding-top: 10px;
    }

    #submitButton {
        height: 50px;
        margin-left: 200px;
        width: 100px;
    }
</style>

<body>
    <div id="wrapper">

    <form id="validationForm">
        <label for="email">Email</label>
        <input name="email" id="email" />

        <label for="phone">Telephone</label>
        <input name="phone" />

        <label for="pass">Password</label>
        <input name="pass" type="password" />

        <label for="pass">Confirm Password</label>
        <input name="pass" type="password" />

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

    </div>

    <script type="text/javascript"> 

        $("#validationForm").submit(function(event) {
    // this is the preventdefault that isn't working.
            event.preventDefault();

            function isValidEmailAddress(emailAddress) {
                var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                return pattern.test(emailAddress);
            }
    // It's giving me syntax error for the '{' in the beginning of this if //statement. 
            if (!isValidEmailAddress($("#email").val()) {
                alert("hello");
            }

        });
    </script>
</body>
</html>

Answer 1

您在此行中错过了结束)：

if (!isValidEmailAddress($("#email").val()) {

应该是：

if (!isValidEmailAddress($("#email").val())) {

请注意，您有4个(且只有3个)？这就是问题所在。在编辑代码时考虑使用IDE，它会立即解决这个问题。

修改

此外，语法错误导致event.preventDefault()无法触发，因此此修复程序也将解决此问题。

Answer 2

看起来您的代码语法需要进行一些更正：

<script type="text/javascript"> 
  $("#validationForm").on('submit', function(event) {
      event.preventDefault();

      function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
      }

      if (!isValidEmailAddress($("#email").val())) {
        alert("hello");
      }
  });
</script>

这是DEMO

jQuery preventDefault（）无法正常工作和语法错误

2 个答案: