Home >Web Front-end >JS Tutorial >Initial experience with jQuery Validate (1)_jquery

Initial experience with jQuery Validate (1)_jquery

WBOYOriginal: 2016-05-16 15:26:081357browse

jQuery 是一個快速、簡單的JavaScript library，它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。 jQuery 是為改變你編寫JavaScript 的方式而設計的。

jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單。

但是在學習的過程中，我也遇到了疑惑，網上的許多例子似乎都是依賴jquery.metadata.js這個庫，然後在標籤裡寫成class=”required remote” 這樣的形式，class本身是呈現樣式的，現在被附上各種校驗的規則，看起來有些亂。那如果不依賴jquery.metadata.js，又該怎麼寫。

1、只引入jquery.js(具體版本自己選擇)和jquery.validate.js

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

事實證明，只引入上面的兩個JS檔案也能完成簡單的表單驗證。

2、不過由於預設的提示訊息是英文的，為了能有一個友善的提示，所以，接下來要做的就是讓提示訊息顯示成中文了。

方法一、透過javascript自訂提示資訊。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
 $().ready(function() {
 $("#registerForm").validate({
  rules : {
  username : {
   required : true,
   rangelength:[2,10]
  },
  password : {
   required : true,
   minlength:6
  },
  confirmpassword : {
   required : true,
   equalTo:"#cpassword"
  },
  email : {
   required : true,
   email : true
  }
  },
  messages : {
  username : {
   required : '请输入姓名',
   rangelength:'长度在 {0} 到 {1} 之间'
  },
  password : {
   required : '请输入密码',
   minlength:'密码不能少于 {0}位'
  },
  confirmpassword : {
   required : '请再次输入密码',
   equalTo:'两次输入的密码不一致'
  },
  email : {
   required :'请输入邮箱',
   email : '请输入有效的电子邮件地址'
  }
  }
 });
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text"/>
  </p>
  <p>
  <label for="cpassword">密码</label> 
  <input id="cpassword" name="password" type="password"/>
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password"/>
  </p>
  <p>
  <label for="cemail">邮箱</label>
  <input id="cemail" name="email" type="email"/>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

首先這裡有一個方法呼叫： $("#registerForm").validate([options]) ，這是用來驗證選擇的表單，方法的參數是可選項，可以輸入0個或多個鍵值對(key/value)，這個方法是為了處理例如：submit , focus , keyup , blur, click 觸發驗證的，物件是整個表單的元素，或是單一元素，使用rules 和messages 定義驗證的元素，使用errorClass , errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的錯誤訊息顯示。其中rules裡也可以輸入0個或多個鍵值對，他的key對應的是元素的name屬性值，例如username，confirmpassword等等。而他的value裡則是一些驗證規則。 messages同rules一樣可以輸入0個或多個鍵值對，他的key也是對應的元素的name屬性值，而他的value裡則是驗證錯誤的提示訊息。簡而言之，rules{}中定義驗證規則的方法。 messages{}中定義錯誤輸出。

上面有一點要注意的就是 equalTo:"#cpassword"，這個鍵值對裡的value是元素的ID值(如果注意到#號就應該能察覺到)。

透過上面的寫法，你就可以自訂提示訊息了。或許你會有疑問了，難道我每次驗證表單的時候都要重新自訂提示訊息嗎？當然不是了，你還可以Ctrl C+Ctrl V。這當然是個玩笑。。。不過，接下來的方法二會解決你的疑問。

方法二、自訂一份提示訊息，然後儲存成JS檔案。把他當作模板，然後在需要的頁面直接引入就行。我是從網路下載了一份。

(function( factory ) {
 if ( typeof define === "function" && define.amd ) {
 define( ["jquery", "../jquery.validate"], factory );
 } else {
 factory( jQuery );
 }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
 required: "这是必填字段",
 remote: "请修正此字段",
 email: "请输入有效的电子邮件地址",
 url: "请输入有效的网址",
 date: "请输入有效的日期",
 dateISO: "请输入有效的日期 (YYYY-MM-DD)",
 number: "请输入有效的数字",
 digits: "只能输入数字",
 creditcard: "请输入有效的信用卡号码",
 equalTo: "你的输入不相同",
 extension: "请输入有效的后缀",
 maxlength: $.validator.format("最多可以输入 {0} 个字符"),
 minlength: $.validator.format("最少要输入 {0} 个字符"),
 rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
 range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
 max: $.validator.format("请输入不大于 {0} 的数值"),
 min: $.validator.format("请输入不小于 {0} 的数值")
});
}));

頁面的程式碼和JV1.HTML幾乎是一模一樣，只是多引進了一份JS檔。

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script> 
<script>
 $().ready(function() {
 $("#registerForm").validate();
 });
</script>
</head>
<body>
 <form id="registerForm" method="get" action="">
 <fieldset>
  <p>
  <label for="cusername">用户名</label> 
  <input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
  </p>
  <p>
  <label for="cpassword">密码</label>
  <input id="cpassword" name="password" type="password" required="true" minlength="6">
  </p>
  <p>
  <label for="cconfirmpassword">确认密码</label> 
  <input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
  </p>
  <p>
  <label for="cemail">邮箱</label> 
  <input id="cemail" name="email" required="true" email="true"> </input>
  </p>
  <p>
  <input type="submit" value="提交">
  </p>
 </fieldset>
 </form>
</body>
</html>

Method 1 and 2 are not mutually exclusive and can be used in combination. You can first use method two to save a more general template, and then use method one to customize prompts according to specific situations.

The above is what I learned this afternoon. It is said that in the new version, there is a new way of writing. There is no need to rely on the jquery.metadata.js library mentioned above, nor to customize prompt information through javascript. Instead, the data-rule-verification rule is used in the tag. , data-msg-prompt information to redefine it in this format. Excited to try...

The following are the default verification rules provided by the official website.

(1)required:true required field
(2)remote:"check.php" Use the ajax method to call check.php to verify the input value
(3)email:true You must enter an email in the correct format
(4)url:true You must enter the URL in the correct format
(5)date:true You must enter the date in the correct format
(6)dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only the format is verified, not the validity
(7)number:true You must enter a legal number (negative number, decimal)
(8)digits:true must enter an integer
(9)creditcard: You must enter a legal credit card number
(10)equalTo:"#field" The input value must be the same as #field
(11)accept: Enter a string with a legal suffix (the suffix of the uploaded file)
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters count as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters count as one character)
(14)rangelength:[5,10] The input length must be a string between 5 and 10") (Chinese characters count as one character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10

Okay, after fumbling for nearly two hours, my first essay is now complete. At the same time, I hope it can bring inspiration to everyone.

The next article will introduce you to jQuery Validate preliminary experience (2), Let’s learn together.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the RegExp object of JavaScript regular expressions_javascript skillsNext article：Detailed explanation of the RegExp object of JavaScript regular expressions_javascript skills

See more

Initial experience with jQuery Validate (1)_jquery

Related articles