在jquery mobile中,在对某个表单的验证上,可以依然使用jquery-validation框架,
反正都是一家的,具体例子如下:
1)使用的js:
jquery.validate.min.js
jquery.mobile-1.0a3.min.js
jquery.mobile-1.0a3.min.css
2)HTML表单
可以看到,加上class="required"即完成必须输入项的验证
3 验证的JS其实很简单,跟普通的jquery validate一样
$("#frmLogin").validate({
submitHandler: function(form) {
console.log("Call Login Action");
}
});
如果验证成功,则执行真正逻辑部分
4 jquery mobile还提供了横向和竖向手机切换屏时的CSS样式切换,如下:
反正都是一家的,具体例子如下:
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; }