jQuery.validate.js表单验证插件的使用代码详解

2019-11-19 12:39:05

字体：大中小

来源：转载

供稿：网友

Validate

Validate是基于jQuery的一款轻量级验证插件，内置丰富的验证规则，还有灵活的自定义规则接口，HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式，支持input,select,textarea的验证。

效果：

代码：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>表单验证插件Validate</title>  <script src="js/jquery-1.10.2.min.js"></script>  <script src="js/jquery.validate.min.js"></script>  <style>    body {      background-color: #000;    }    form {      width: 361px;      margin: 80px auto;      padding: 50px;      border: 2px solid #666;      box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);      background-color: #999;      border-radius: 10px;      box-sizing: border-box;    }    form>div {      margin-bottom: 20px;      color: #fff;    }    form>div>label {      display: inline-block;      width: 80px;      text-align: center;    }    label.error {      display: block;      width: 100%;      color: rgb(189, 42, 42);      font-size: 12px;      text-align: right;      margin-top: 5px;    }    input {      width: 170px;      height: 20px;      outline: none;      background-color: #ddd;      border: 1px solid #ddd;      border-radius: 4px;    }    .submit {      width: 170px;      margin: 30px auto 0;    }    .submit input {      background-color: #0099aa;      color: #fff;      border: 0;      padding: 5px;      height: 30px;    }  </style></head><body>  <form id="signupForm" action="" method="post">    <div>      <label for="name">姓名：</label>      <input type="text" id="name" name="name">    </div>    <div>      <label for="email">邮箱：</label>      <input type="email" id="email" name="email">    </div>    <div>      <label for="password">密码：</label>      <input type="password" id="password" name="password">    </div>    <div>      <label for="confirm_password">确认密码：</label>      <input type="password" id="confirm_password" name="confirm_password">    </div>    <div class="submit">      <input type="submit" value="提交">    </div>  </form></body><script>  $(function() {    $("#signupForm").validate({      rules: {        name: "required",        email: {          required: true,          email: true        },        password: {          required: true,          minlength: 5        },        confirm_password: {          required: true,          minlength: 5,          equalTo: "#password"        }      },      messages: {        name: "请输入姓名",        email: {          required: "请输入Email地址",          email: "请输入正确的Email地址"        },        password: {          required: "请输入密码",          minlength: "密码不能小于5个字符"        },        confirm_password: {          required: "请输入确认密码",          minlength: "确认密码不能小于5个字符",          equalTo: "两次输入的密码不一致"        }      }    });  })</script></html>

总结

以上所述是小编给大家介绍的jQuery.validate.js表单验证插件的使用代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：每个 JavaScript 工程师都应懂的33个概念

下一篇：React SSR样式及SEO的实践