Question

我正在关注有关JQuery的视频教程。我复制了视频中的代码，甚至将视频附带的代码复制并粘贴到我的文本编辑器中，但由于某种原因，它不能在我的机器上运行，但它正在处理教学视频。当我在字段中输入一个值时，它应检查它是否是有效的电子邮件（使用REGEX），如果另一个字段是数字，并且密码字段匹配。如果没有，那么错误消息会提示我。错误是，它接受了我的所有输入，它没有做提示部分。我不知道它是在我的浏览器或机器上的设置还是由此导致的任何设置。请帮忙。

<!doctype html>
<html>
<head>
<title>Learning 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="jquery.min.js"></script>
<style>
#wrapper {
width:600px;
margin:0 auto;
font-family: helvetica;
font-size:1.2em;
}
input {
    width:300px;
height:30px;
padding:5px;
border-radius:5px;
font-size:1.2em;
border: 1px solid grey;
margin-bottom:10px;
}
label {
width:200px;
float:left;
padding-top:7px;
}
#submitButton {
height:50px;
margin-left:200px;
width:100px;
}
#error {
color:red;
margin:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="error"></div>
<form id="validationForm">
<label for="email">Email</label>
<input name="email" id="email" />
<label for="phone">Telephone</label>
<input name="phone" id="phone" />
<label for="pass">Password</label>
<input name="pass" type="password" id="pass1" />
<label for="pass">Confirm Password</label>
<input name="pass" type="password" id="pass2" />
<input id="submitButton" type="submit" value="Submit" />
</form>
</div>
<script>
$("#validationForm").submit(function(event) {
var errorMessage="";
event.preventDefault();
function
isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|
[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\
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())) {
errorMessage="<br />Please enter a
valid email address";
}
if (!$.isNumeric($("#phone").val())) {
errorMessage=errorMessage+"<br />Please enter a valid phone number";
}
if ($("#pass1").val() != $("#pass2").val()) {
errorMessage=errorMessage+"<br />Please enter matching passwords";
}
if (errorMessage=="") {
alert("Success!");
} else {
$("#error").html(errorMessage);
}
});
</script>
</body>
</html>

Answer 1

我已经以某种方式整理你的代码并设法使其运行。有关详细信息，请参阅下面的代码段。

＆＃13;

$("#validationForm").submit(function(event) {
      var errorMessage = "";
      event.preventDefault();

      function
      isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\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())) {
        errorMessage = "<br />Please enter a valid email address";
      }
      if (!$.isNumeric($("#phone").val())) {
        errorMessage = errorMessage + "<br />Please enter a valid phone number";
      }
      if ($("#pass1").val() != $("#pass2").val()) {
        errorMessage = errorMessage + "<br />Please enter matching passwords";
      }
      if (errorMessage == "") {
        alert("Success!");
      } else {
        $("#error").html(errorMessage);
      }
    });

＆＃13;

#wrapper {
  width: 600px;
  margin: 0 auto;
  font-family: helvetica;
  font-size: 1.2em;
}
input {
  width: 300px;
  height: 30px;
  padding: 5px;
  border-radius: 5px;
  font-size: 1.2em;
  border: 1px solid grey;
  margin-bottom: 10px;
}
label {
  width: 200px;
  float: left;
  padding-top: 7px;
}
#submitButton {
  height: 50px;
  margin-left: 200px;
  width: 100px;
}
#error {
  color: red;
  margin: 20px;
}

＆＃13;

<!doctype html>
<html>

<head>
  <title>Learning 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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
  <div id="wrapper">
    <div id="error"></div>
    <form id="validationForm">
      <label for="email">Email</label>
      <input name="email" id="email" />
      <label for="phone">Telephone</label>
      <input name="phone" id="phone" />
      <label for="pass">Password</label>
      <input name="pass" type="password" id="pass1" />
      <label for="pass">Confirm Password</label>
      <input name="pass" type="password" id="pass2" />
      <input id="submitButton" type="submit" value="Submit" />
    </form>
  </div>
</body>

</html>

＆＃13;

使用jQuery和regex验证字段

1 个答案: