我正在尝试学习 jQuery Mobile 的 jQuery 表单验证。我不断遇到本教程,我正在尝试复制该教程,但资源链接肯定有问题,导致 html 看起来不错。理论上,当用户点击回车并且电子邮件和密码字段为空白时,应该会出现一条消息,告诉用户“此字段是必需的”。
这是整个代码:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javacsript">
$( "#frmLogin" ).validate({
submitHandler: function( form ) {
alert( "Call Login Action" );
}
});
</script>
<style type="text/css">
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
@media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
@media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body>
<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>
</body>
</html>