Question

这是jQuery表单验证（html，css和jQuery），但代码并不适用于所有if语句和我无法解决的错误消息。

＆＃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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

＆＃13;

Answer 1

如果是HTML5，那么您期待最终用户＆＃39;要支持HTML5引擎的浏览器，您可以为input元素使用适当的类型属性：

＆＃13;

$("#validationForm").on('submit', function(event) {
  var errorMessage = "";
  event.preventDefault();

  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;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">
    <div id="error"></div>
    <form id="validationForm">
      <label for="email">Email</label>
      <input name="email" id="email" type='email' required />
      <label for="phone">Telephone</label>
      <input name="phone" id="phone" type='tel' required />
      <label for="pass">Password</label>
      <input name="pass" type="password" id="pass1" required />
      <label for="pass">Confirm Password</label>
      <input name="pass" type="password" id="pass2" />
      <input id="submitButton" type="submit" value="Submit" />
    </form>
  </div>

</body>

＆＃13;

请注意，我已相应地使用了type='email'和type='tel'。此外，我默认将字段设为required。这样，浏览器本身就会要求用户不要将这些字段留空。

表单验证不适用于jQuery

1 个答案: