在jquery mobile中,在对某个表单的验证上,可以依然使用jquery-validation框架,
反正都是一家的,具体例子如下:
反正都是一家的,具体例子如下:
1)使用的js:
jquery.validate.min.js
jquery.mobile-1.0a3.min.js
jquery.mobile-1.0a3.min.css
2)HTML表单
<div data-role="page" id="login"> <div data-role="header"> <h1>Acme Corporation</h1> </div> <div data-role="content"> <form id="frmLogin" class="validate"> <div data-role="fieldcontain"> <label for="email">[i]* [/i] Email: </label> <input type="text" id="email" name="email" class="required email" /> </div> <div data-role="fieldcontain"> <label for="password">[i]* [/i]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>
可以看到,加上class="required"即完成必须输入项的验证
3 验证的JS其实很简单,跟普通的jquery validate一样
$("#frmLogin").validate({
submitHandler: function(form) {
console.log("Call Login Action");
}
});
如果验证成功,则执行真正逻辑部分
4 jquery mobile还提供了横向和竖向手机切换屏时的CSS样式切换,如下:
.portrait label.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%; } .portrait label.error { margin-left: 0; display: block; } em { color: red; font-weight: bold; padding-right: .25em; }