使用jQuery的validate对提交的表单进行验证

Posted 2021-03-19 gcgc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jQuery的validate对提交的表单进行验证相关的知识，希望对你有一定的参考价值。

1、将校验规则写到控件中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {

      //验证通过后执行这里

      alert("提交事件!");

    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>
<style>
.error{
    color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
</body>
</html>

必填项未填写

技术图片

必填项不符合输入规则：

技术图片

验证通过：

技术图片

以上是关于使用jQuery的validate对提交的表单进行验证的主要内容，如果未能解决你的问题，请参考以下文章

使用 GET 变量对表单提交进行 Mod 重写

如何使用AngularJS对表单提交内容进行验证

如何使用 jQuery 对表单提交进行验证

Feign表单提交

使用jQuery的validate对提交的表单进行验证