javascript按钮在html中不起作用
javascript button not working in html
我目前是web开发的新手。我忽略了这个代码，直到头疼。有人明白为什么点击登录按钮什么都不做吗？
function validate()
{
if( validateEmail(document.myForm.login.value)!==true )
{
alert( "Please provide your valide email address!" );
document.myForm.login.focus() ;
return false;
}
if(form.password.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.password.focus();
return false;
}
if(form.password.value == form.login.value) {
alert("Error: Password must be different from Username!");
form.password.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.password.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.password.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.password.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.password.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.password.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.password.focus();
return false;
}
else {
alert("Error: Please check that you've entered and confirmed your password!");
form.password.focus();
return false;
}
return true;
}
function validateEmail(email) {
var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function doLogin(){
if(validate()){
var username = document.getElementById("login").value;
var password = document.getElementById("password").value;
if ( username == "admin@website.co.za" && password == "Password1"){
alert ("Login successfully");
window.location = "session.php"; // Redirecting to other page.
return false;
}
else{
attempt--;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt === 0){
document.getElementById("login").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
}
^^javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="styles'login_Style.css">
<title>Log In</title>
</head>
<body>
<div class="container">
<div class="login">
<h1>Login</h1>
<form name="myForm" method="post" action="">
<p>
<input type="text" name="login" value="" placeholder="Email Address">
</p>
<p>
<input type="password" name="password" value="" placeholder="Password">
</p>
<p class="submit">
<button type="button" name="commit" value="Login" onclick="doLogin()">Login</button>
</p>
<p class="submit">
<button type="button" name="back" value="back" onclick="document.location.href='home-page.html';">Back To Home Page</button>
</p>
</form>
</div>
</div>
<script></script>
</body>
</html>
^^html按钮。请注意，脚本位于正文关闭的正上方。
尝试复制并粘贴它，您应该更接近于解决问题。我在代码中包含了一些注释，以帮助您理解我所做的操作。
<!DOCTYPE html>
<html>
<head>
<!--You need to reference these scripts to actually use any validation.-->
<script src="lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!--End Script reference-->
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles'login_Style.css">
<title>Log In</title>
</head>
<body>
<script>
function validate() {
if (validateEmail(document.myForm.login.value) !== true) {
alert("Please provide your valid email address!");
document.myForm.login.focus();
return false;
}
if (myForm.password.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.password.focus();
return false;
}
if (myForm.password.value == myForm.login.value) {
alert("Error: Password must be different from Username!");
form.password.focus();
return false;
}
re = /[0-9]/;
if (!re.test(myForm.password.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.password.focus();
return false;
}
re = /[a-z]/;
if (!re.test(myForm.password.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.password.focus();
return false;
}
re = /[A-Z]/;
if (!re.test(myForm.password.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.password.focus();
return false;
}
//Your else function was returning false therefore when you did actually validate you would always get false and never actually validate
else {
return true;
}
}
function validateEmail(email) {
var re = /^(([^<>()[']''.,;:'s@'"]+('.[^<>()[']''.,;:'s@'"]+)*)|('".+'"))@(('[[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'.[0-9]{1,3}'])|(([a-zA-Z'-0-9]+'.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function doLogin() {
if (validate()) {
var username = document.getElementById("login").value;
var password = document.getElementById("password").value;
if (username == "admin@website.co.za" && password == "Password1") {
alert("Login successfully");
window.location = "session.php"; // Redirecting to other page.
return false;
}
else {
attempt--;// Decrementing by one.
alert("You have left " + attempt + " attempt;");
// Disabling fields after 3 attempts.
if (attempt === 0) {
document.getElementById("login").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
}
</script>
<div class="container">
<div class="login">
<h1>Login</h1>
<!--onsubmit it will call the function doLogin() and the action attribute will redirect to session.php-->
<form name="myForm" method="post" onsubmit="doLogin()" action="session.php">
<p>
<!--Use Id to tag the elements that are getElementById-->
<input type="text" name="login" id="login" placeholder="Email Address">
</p>
<p>
<!--Use Id to tag the elements that are getElementById-->
<input type="password" name="password" id="password" placeholder="Password">
</p>
<p class="submit">
<!--Use Id to tag the elements that are getElementById-->
<!--Also the button type should be submit and id also submit-->
<button type="submit" name="commit" id="submit">Login</button>
</p>
<p class="submit">
<!--This is how I would do the back to home page button. It still should appear as a button-->
<a type="button" href="http://yoursite.com/home-page.html">Back To Home Page</a>
</p>
</form>
</div>
</div>
</body>
</html>
由于验证是一个应该像这样使用的函数，
function doLogin(){
if(validate()){
目前您正在将其用作变量。
我已经编辑了小提琴里面的代码。看看这个。Fiddle
尝试以下更新的HTML代码
<p class="submit"><button type="button" name="commit" value="Login" onclick="javascript:doLogin()">Login</button></p>
并确保doLogin函数中的validate变量具有有效值，如true/false
相关文章：
- 使用PHP插入HTML在JavaScript上不起作用
- html文件中的script标记根本不起作用
- 当我在浏览器中打开HTML文件时，javascript不起作用
- <text区域>在我的html中包含event.keycode==13之后，wrap就不起作用了
- 通过jQuery插入HTML不起作用
- ngResource没有'从JSON文件解析HTML时不起作用
- 使用jquery插入动态HTML后，单击不起作用
- 为什么不'这个HTML按钮不起作用
- HTML表单在IE中不起作用
- 在 JQUERY 中创建 HTML 后，Jquery 方法不起作用
- html/jquery输入类型:单选框中的文本不起作用
- 从HTML链接时，Javascript文件不起作用
- 按键事件上的简单HTML输入不起作用
- 如果iframe在src(pdf或text）中有非html文档，则iframe中的onload不起作用
- html视频javascript播放方法在移动Safari中不起作用
- 显示隐藏的html表在javascript(IE8）中不起作用
- 在html中显示javascript变量won'不起作用
- Javascript - 当使用 Javascript 生成 HTML 元素时，Magnific Popup 不起作用
- 表单验证在 HTML 中工作的 Visualforce 中不起作用
- 移动导航菜单不起作用(HTML，CSS和JQuery）
