jQuerymobile驗證字段值

Question

我jQuerymobile + PhoneGap應用程序，我有20個項目的網頁，我想驗證它的一些如下領域：

function validate() { 
    if ($('#username').val() == '') { 

     alert("Fullname Required") 
    } 
    if ($('#email').val() == '') { 

     alert("Email Required") 
    } 
    if ($('#digitalspend').has('option').length > 0) { 

     alert("Digital media Spend Required") 
    } 
    if ($('#objective1').has('option').length > 0) { 

     alert("objective1 Required") 
    } 
    if ($('#objective2').has('option').length > 0) { 

     alert("objective2 Required") 
    } 
    if ($('#objective3').has('option').length > 0) { 

     alert("objective3 Required") 
    } 
    if ($('#name').val() == '') { 

     alert("Organization Name Required") 
    } else { 

     loadingStart(); 
     setTimeout(function() { 
      loadingEnd(); 
      $.mobile.changePage('#page2'); 
     }, 5000); 
     return false; 

     function loadingStart() { 
      $.mobile.loading('show', { 
       text: "Please Wait...", 
       textVisible: true, 
       theme: 'b', 

      }); 
     } 

     function loadingEnd() { 
      $.mobile.loading("hide"); 
     } 

    } 
} 

我要驗證這個領域，如果一切都充滿。 我需要顯示加載對話框並轉到下一頁。但它沒有按預期工作。我不想一次一個地驗證整個表單。

Answer 1

爲此，我建議jQuery Validation Plugin

這個插件可以讓你定義你要驗證每個字段的規則。經過驗證後，如果它不符合要求，它將使用預定義的消息標記每個字段。

看一看這個例子從demo page：

// validate signup form on keyup and submit 
    $("#signupForm").validate({ 
     rules: { 
      firstname: "required", 
      lastname: "required", 
      username: { 
       required: true, 
       minlength: 2 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      confirm_password: { 
       required: true, 
       minlength: 5, 
       equalTo: "#password" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
      topic: { 
       required: "#newsletter:checked", 
       minlength: 2 
      }, 
      agree: "required" 
     }, 
     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname", 
      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      confirm_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long", 
       equalTo: "Please enter the same password as above" 
      }, 
      email: "Please enter a valid email address", 
      agree: "Please accept our policy" 
     } 
    });