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" 
     } 
    });