这是我的Login.php
我使用javascript在我的登录中使用了一些验证,但有时它不起作用,有时也不起作用。 我无法在代码中找到问题。
这是head.php
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
我可以做些什么来让它一直有效?
<div class="widget">
<h2>Login</h2>
<div class="inner">
<script type="text/javascript">
$().ready(function() {
// validate signup form on keyup and submit
$("#login").validate({
rules: {
password: {
required: true,
minlength: 8,
maxlength: 15
},
username: {
required: true,
minlength: 3,
},
},
messages:{
password:{
required: "Password is required.",
minlength: "Password must be 8-15 characters only.",
maxlength: "Password must be 8-15 characters only."
},
username:{
required: "Username is required",
minlength: "Username must be 2 or more characters."
},
}
});
});
</script>
<style type="text/css">
form.cmxform label.error, label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
padding-top:3px;
color: red;
font-style: italic;
font-size: 11px;
float: none;
text-align: left;
margin-left:5px;
width: 100px;
}
</style>
<form name="login" id="login" class="cmxform" action="login.php" method="post">
<ul id="login">
<li>
Username:<br>
<input style="width:100%" type="text" name="username">
</li>
<li>
Password:<br>
<input style="width:100%" type="password" name="password">
</li>
<li>
<input type="submit" Value="Login">
</li>
<li></li>
</ul>
</form>
</div>
</div>
答案 0 :(得分:6)
在您的代码中添加文档。
$(document).ready(function(){
//Your Code Logic;
});
答案 1 :(得分:1)
尝试添加"document"
功能
$().ready(function(){/*implementation*/});
更改为
$(document).ready(function(){/*implementation*/});
答案 2 :(得分:0)
使用document作为参数传递给ready
事件。
$().ready()
应更改为$(document).ready()
来自doc:
All three of the following syntaxes are equivalent:
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )
答案 3 :(得分:0)
尝试此类型:
$(function(){
///////your code.........
});
答案 4 :(得分:0)
正如Sanjay所写,问题/问题的正确答案/解决方案是
$(document).ready(function(){
//Your Code Logic;
});
ready
确保在DOM准备好后执行代码(请参阅Manual)。
我建议使用HTML5属性:
他们是相对的保存使用(caniuse) 并且不需要JavaScript。
以下HTML5根据W3C validator有效。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a</title>
<style type="text/css">
form.cmxform label.error, label.error {
/* remove the next line when you have trouble in IE6 with labels in list */
padding-top:3px;
color: red;
font-style: italic;
font-size: 11px;
float: none;
text-align: left;
margin-left:5px;
width: 100px;
}
#username, #password {
width:100%;
}
</style>
</head>
<body>
<div class="widget">
<h2>Login</h2>
<div class="inner">
<form name="login" id="login" class="cmxform" action="login.php" method="post">
<ul>
<li>
Username:<br/>
<input id="username" type="text" name="username" required pattern=".{3,}"/>
</li>
<li>
Password:<br/>
<input id="password" type="password" name="password" required pattern=".{8,15}" maxlength="15">
</li>
<li>
<input type="submit" Value="Login">
</li>
<li></li>
</ul>
</form>
</div>
</div>
</body>
</html>
还有一些问题:
id="login"
出现两次