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>
必填项未填写
必填项不符合输入规则:
验证通过:
来源: http://www.bubuko.com/infodetail-3363463.html