Jquery 組表單驗證

最後更新：2017-08-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：處理 utf-8 trigger 表單冒泡地址 on() style 觸發事件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <title></title>
 <style>
 </style>
</head>
<body>
<form action="" method="post">
 <div class="int">
  <label for="username">使用者名稱：</label>
  <input type="text" id="username" class="required"/>
 </div>
 <div class="int">
  <label for="email">郵箱：</label>
  <input type="text" id="email" class="required"/>
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/>
  <input type="reset" value="重設" id="res"/>
 </div>
</form>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
 $("form :input.required").each(function(){
//  先清除已經加上的
  var $required=$("<strong style=‘color:red‘ class=‘high‘>*</strong>");
  $(this).parent().append($required);
 });
 $(‘form :input‘).blur(function(){
  var $parent=$(this).parent();
  $parent.find(".formtips").remove();
  if($(this).is(‘#username‘)){
   if(this.value==""||this.value.length<6){
    var erroMsg=‘請輸入至少6位的使用者名稱.‘;
    $parent.append(‘<span class="formtips onError" >‘+erroMsg+‘</span>‘)
   }else{
    var okMsg=‘輸入正確.‘;
    $parent.append(‘<span class="formtips onSuccess" >‘+okMsg+‘</span>‘)
   }
  }
  if($(this).is(‘#email‘)){
   if(this.value==""||(this.value!=""&&!/[email protected]+\.[a-zA-Z]{2,4}$/.test(this.value))){
    var eerroMsg=‘請輸入正確的E-Mail地址.‘;
    $parent.append(‘<span class="formtips onError" >‘+eerroMsg+‘</span>‘)
   }else{
    var eokMsg=‘輸入正確.‘;
    $parent.append(‘<span class="formtips onSuccess" >‘+eokMsg+‘</span>‘)
   }
  }
 }).keyup(function(){
  $(this).triggerHandler("blur");
 }).focus(function(){
  $(this).triggerHandler("blur");
 });
// 觸發事件，全部再檢驗一次
 $(‘#send‘).click(function(){
  $("form .required:input").trigger(‘blur‘);
  var numError=$(‘form .onError‘).length;
  if(numError){
   return false;
  }
  alert("註冊成功，密碼已經發到你的郵箱，請查收。");
 })
// trigger() 方法觸發被選元素上指定的事件以及事件的預設行為（比如表單提交）。
// 該方法與 triggerHandler() 方法類似，不同的是 triggerHandler() 不觸發事件的預設行為。
// 與 triggerHandler() 方法相比的不同之處:
//  它不會引起事件（比如表單提交）的預設行為
//  .trigger() 會操作 jQuery 對象匹配的所有元素，而 .triggerHandler() 隻影響第一個匹配元素。
// 由 .triggerHandler() 建立的事件不會在 DOM 樹中冒泡；如果目標元素不直接處理它們，則不會發生任何事情。
</script>
</html>

Jquery 組表單驗證

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More