Jquery Mobile 客户端验证
(转自WebWeb Dev .NET ，很容易看懂的)我找了n长时间，这个算是挺不错了。下面是英文原文
I am working on a jQuery Mobile application and one of the standard requirements when you have form elements is to provide client-side validation.
I hadn't seen an example of that yet, so my first inclination was to use the jQuery Validation plugin. As it turns out, the implementation is about the same as you would expect with a non-mobile solution.
<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 just adding metadata validation classes to the input elements to indicate what rules (example: required, email, etc...) need to be checked when the form is submitted. You can provide these rules also programmatically, but I won't focus on that technique in this post. You can find more details about how to provide validation rules at runtime in the plugin's documentation.
In JavaScript, all you have to do is to call the validate() method off of the form element and provide a submitHandler that will perform the action once your form has passed all it's validation rules.
submitHandler: function(form) {
console.log("Call Login Action");
An interesting challenge comes on mobile devices when considering how to display the validation message in portrait versus landscape mode. I wanted the alignment of the errors to show up different depending upon the orientation.
As it turns out, the solution to this problem was a simple matter of changing my CSS. The jQuery Mobile framework switches adds a special class (.portrait or .landscape) to the html element depending on the orientation of the mobile device. By using the following CSS the validation errors will display differently depending if the mobile device is in portrait or landscape mode.
Since simulating portrait vs landscape mode on a desktop browser is slightly difficult I took some screenshots from my iPhone for you to see the difference.
