Jquery Mobile 客户端验证

转自http://www.cnblogs.com/az19870227/archive/2011/06/21/2086292.html

(转自WebWeb Dev.NET ，很容易看懂的)我找了n长时间，这个算是挺不错了。下面是英文原文

I am working on a jQuery Mobile application and one of thestandard requirements when you have form elements is to provide client-sidevalidation.

 

I hadn't seen anexample of that yet, so my first inclination was to use the jQueryValidation plugin. As it turns out, the implementation is about the same asyou would expect with a non-mobile solution.

 

<div data-role="page" id="login">

    

  <div data-role="header">

     <h1>Acme Corporation</h1>

  </div>

    

  <div data-role="content">

        

    <form id="frmLogin">

      <div data-role="fieldcontain">

        <label for="email">

          <em>* </em> Email: </label>

          <input type="text" id="email" 

            name="email" class="required email" />

      </div>

            

      <div data-role="fieldcontain">

        <label for="password"> 

          <em>* </em>Password: </label>

          <input type="password" id="password" 

            name="password" class="required" />

      </div>

            

      <div class="ui-body ui-body-b">

        <button class="btnLogin" type="submit" 

          data-theme="a">Login</button>

      </div>

    </form>

        

  </div>

    

</div>

In this case I justadding metadata validation classes to the input elements to indicate what rules(example: required, email, etc...) need to be checked when the form issubmitted. You can provide these rules also programmatically, but I won't focuson that technique in this post. You can find more details about how to providevalidation rules at runtime in the plugin's documentation.

 

In JavaScript, allyou have to do is to call the validate() method off of the form element andprovide a submitHandler that will perform the action once your form has passedall it's validation rules.

$("#frmLogin").validate({ 

   submitHandler: function(form) {          

       console.log("Call LoginAction");   

   }

});

An interestingchallenge comes on mobile devices when considering how to display thevalidation message in portrait versus landscape mode. I wanted the alignment ofthe errors to show up different depending upon the orientation.

 

As it turns out, thesolution to this problem was a simple matter of changing my CSS. The jQueryMobile framework switches adds a special class (.portrait or .landscape) to thehtml element depending on the orientation of the mobile device. By using the followingCSS the validation errors will display differently depending if the mobiledevice is in portrait or landscape mode.

.portraitlabel.error, .landscape label.error {  

   color: red;  

   font-size: 16px;   

   font-weight: normal;  

   line-height: 1.4;   

   margin-top: 0.5em;   

   width: 100%;   

   float: none;

} 

 

 .landscape label.error {  

   display: inline-block;   

   margin-left: 22%;

 }

 

.portraitlabel.error {    

   margin-left: 0;    

   display: block;

 }  

 

em {     

  color: red;   

  font-weight: bold;   

  padding-right: .25em; 

}

Since simulatingportrait vs landscape mode on a desktop browser is slightly difficult I tooksome screenshots from my iPhone for you to see the difference.