快捷導(dǎo)航

jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解

更新時(shí)間：2018年10月22日 16:36:28 作者：冰雪Queen

Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件，內(nèi)置豐富的驗(yàn)證規(guī)則，這篇文章主要介紹了jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解,需要的朋友可以參考下

Validate

Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件，內(nèi)置豐富的驗(yàn)證規(guī)則，還有靈活的自定義規(guī)則接口，HTML、CSS與JS之間的低耦合能讓您自由布局和豐富樣式，支持input,select,textarea的驗(yàn)證。

效果：

代碼：

<!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>表單驗(yàn)證插件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">確認(rèn)密碼：</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: "請(qǐng)輸入姓名",
        email: {
          required: "請(qǐng)輸入Email地址",
          email: "請(qǐng)輸入正確的Email地址"
        },
        password: {
          required: "請(qǐng)輸入密碼",
          minlength: "密碼不能小于5個(gè)字符"
        },
        confirm_password: {
          required: "請(qǐng)輸入確認(rèn)密碼",
          minlength: "確認(rèn)密碼不能小于5個(gè)字符",
          equalTo: "兩次輸入的密碼不一致"
        }
      }
    });
  })
</script>
</html>

總結(jié)

以上所述是小編給大家介紹的jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: