phonegap 安卓登录表单
Posted
技术标签:
【中文标题】phonegap 安卓登录表单【英文标题】：phonegap android login form 【发布时间】：2013-03-16 07:21:39 【问题描述】：**为什么我无法在移动端获得验证我没有在字段上获得验证甚至在浏览器中获得应用验证但未能进入移动端。谁能指出我做错了什么？
<!DOCTYPE html>
<html>
<head>
<title>first example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script src="js/lib/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
<script type="text/javascript" src="js/lib/jquery.validate.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src ="js/lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/lib/additional-methods.min.js">
<script type="text/javascript" charset="utf-8" src="js/lib/helloworldjs/alldatabse.js"></script>
<script type="text/javascript">
$(document).ready(
function()
$("#formregistration").validate(
rules:
usernameforreg:
required:true,
minlength:4,
maxlength:10
,
useremail:
required:true,
email:true
,
passwordforreg:
required:true,
minlength:8
,
retypepassword:
required:true,
equalTo:"#passwordforreg"
,
messages:
usernameforreg:
required:"pls enter name",
minlength:$.format("Keep typing, at least 0 characters required!"),
maxlength:$.format("Maximum 0 characters allowed!")
,
useremail:
required:"pls enter email id",
email:"enter valid email id"
,
passwordforreg:
required:"pls enter password",
minlength:$.format("at least 0 characters required!")
,
retypepassword:
required:"pls confirm password",
equalTo:"both passwords must match"
);
$("#formlogin").validate(
rules:
username:
required:true,
minlength:4
,
password:
required:true,
minlength:8
,
messages:
username:
required:"pls enter user name",
minlength:"pls enter atleast 0 characters"
,
password:
required:"pls enter password",
minlength:"password should be atleast 0 characters"
);
);
</script>
</head>
<body>
<div data-role="page" id="login">
<form name="login" id="formlogin" method="get" action="" accept-charset = "utf-8">
<div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange; width:100%; margin:0 auto;">
<label for="username">USER NAME:</label>
<input type="text" name="username" id= "usrname" placeholder="ali" size="10" style="color:#ff9900;" required></input> </br>
<label for = "password">PASSWORD:</label>
<input type = "password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" required title="User name is required"></input></br>
<a href="#" id ="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="doLogin1();" style= "width:120px;" "height:60px;" "float:right;">LOGIN</a>
<a href="#" id ="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="showRegisterForm();" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a>
</div>
</form>
</div>
<div data-role="page" id="registration">
<form name="" id="formregistration" method="get" action="">
<div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;">
<label for="usernameforreg">USER NAME:</label>
<input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" required></input></br>
<label for="emailid">EMAIL ID:</label>
<input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" required></input></br>
<label for="passwordforreg">PASSWORD:</label>
<input type="password" name="passwordforreg" id="passwordforreg" palceholder="pls enter your password" style="color:#ff9900;"></input></br>
<label for="retypepassword">RETYPE PASSWORD:</label>
<input type="password" name="retypepassword" id="retypepasswordforreg" palceholder="retype password" style="color:#ff9900;" clas-s-required></input></br>
<a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" onclick="registrationProcess();" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a>
</div>
</form>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：如果您可以在删除所有无关和多余代码的情况下发布您的示例，那么在 SO 对我们来说会更容易。例如，我们不需要查看所有的内联样式。
总之，我发现了一堆问题……
1) 您没有正确包含脚本。您首先需要（并且一次）jQuery，然后是其他所有内容。非常仔细地检查你的语法；您缺少来自additional-methods.js 的结束</script> 标签。您也不需要同时包含同一脚本的缩小版和未缩小版...只需选择一个即可。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
<script type="text/javascript" src="js/lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/lib/additional-methods.min.js"></script>
<script type="text/javascript" src="js/lib/helloworldjs/alldatabse.js"></script>
2) 在您的表单中，您有一些无效的 HTML。输入和换行是“自动关闭的”...
不是这样的：<input></input> 和 </br>
是的，像这样： <input /> 和 <br />
3) 您正在使用内联 JavaScript 通过内联 onclick 事件处理程序调用其他函数。由于您使用的是 jQuery，因此您不妨充分利用它。删除内联 JavaScript 并执行类似的操作，这可以有效地将您的锚标记变成一个提交按钮。
$('#loginbtn').on('click', function (e)
e.preventDefault();
$("#formlogin").submit();
);
4) 在表单 HTML 中，您可以将 required 更改为 required="required"，这是更好的语法。顺便说一句，由于您已经在 .validate() 中声明了 required，因此您无需在 HTML 中再次指定这些规则......做一个或另一个......不需要两者。我从 HTML 中删除了这些。
5) 由于您已经在 .validate() 中指定了所有消息，因此我从输入中删除了 title 属性。
6) 您在几个地方将placeholder 属性拼错为palceholder。
所有（我认为）都修复后，jQuery Validation 似乎正在工作：
演示：http://jsfiddle.net/5T3tq/1/
您现在可以慢慢添加其他插件和功能
jQuery：
$(document).ready(function ()
$('#loginbtn').on('click', function (e)
e.preventDefault();
$("#formlogin").submit();
);
$('#submitbtn').on('click', function (e)
e.preventDefault();
$("#formregistration").submit();
);
$('#signupbtn').on('click', function (e)
e.preventDefault();
// show register form
$('#registration').show();
);
$("#formregistration").validate(
rules:
usernameforreg:
required: true,
minlength: 4,
maxlength: 10
,
useremail:
required: true,
email: true
,
passwordforreg:
required: true,
minlength: 8
,
retypepassword:
required: true,
equalTo: "#passwordforreg"
,
messages:
usernameforreg:
required: "pls enter name",
minlength: $.format("Keep typing, at least 0 characters required!"),
maxlength: $.format("Maximum 0 characters allowed!")
,
useremail:
required: "pls enter email id",
email: "enter valid email id"
,
passwordforreg:
required: "pls enter password",
minlength: $.format("at least 0 characters required!")
,
retypepassword:
required: "pls confirm password",
equalTo: "both passwords must match"
);
$("#formlogin").validate(
rules:
username:
required: true,
minlength: 4
,
password:
required: true,
minlength: 8
,
messages:
username:
required: "pls enter user name",
minlength: "pls enter atleast 0 characters"
,
password:
required: "pls enter password",
minlength: "password should be atleast 0 characters"
);
);
HTML：
<div data-role="page" id="login">
<form name="login" id="formlogin" method="get" action="" accept-charset="utf-8">
<div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange; width:100%; margin:0 auto;">
<label for="username">USER NAME:</label>
<input type="text" name="username" id="usrname" placeholder="ali" size="10" style="color:#ff9900;" />
<br />
<label for="password">PASSWORD:</label>
<input type="password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" />
<br /> <a href="#" id="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">LOGIN</a>
<a href="#" id="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a>
</div>
</form>
</div>
<div data-role="page" id="registration" style="display: none;">
<form name="" id="formregistration" method="get" action="">
<div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;">
<label for="usernameforreg">USER NAME:</label>
<input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" />
<br />
<label for="emailid">EMAIL ID:</label>
<input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" />
<br />
<label for="passwordforreg">PASSWORD:</label>
<input type="password" name="passwordforreg" id="passwordforreg" placeholder="pls enter your password" style="color:#ff9900;" />
<br />
<label for="retypepassword">RETYPE PASSWORD:</label>
<input type="password" name="retypepassword" id="retypepasswordforreg" placeholder="retype password" style="color:#ff9900;" />
<br/> <a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a>
</div>
</form>
</div>
【讨论】：
非常感谢您的合作，我会尽力更正我的代码并检查结果，请让我知道我可以关注哪些网站或书籍作为我的电话间隙此开发中的新手，在 jquery 和 JS 方面面临困难 @ErumHannan，我不知道任何书籍，但我在the jQuery website 了解了 jQuery，在 SO 上阅读了它，并在 jsFiddle 中尝试了我自己的代码。只是需要时间。以上是关于phonegap 安卓登录表单的主要内容，如果未能解决你的问题，请参考以下文章