为什么我的JavaScript验证无效？
[英]Why my JavaScript Validation is not working?
问题描述
我想用JavaScript和PHP验证我的注册表格。 问题是我的JavaScript验证无法正常工作。 单击带有用户名，密码和电子邮件的注册按钮后，我的JavaScript没有收到任何错误。 但是我的PHP验证工作正常。 我的代码有什么问题？
var username = document.forms['vform']['username']; var email = document.forms['vform']['email']; var password = document.forms['vform']['password_1']; var password_confirm = document.forms['vform']['password_2']; // SELECTING ALL ERROR DISPLAY ELEMENTS var name_error = document.getElementById('name_error'); var email_error = document.getElementById('email_error'); var password_error = document.getElementById('password_error'); // SETTING ALL EVENT LISTENERS username.addEventListener('blur', nameVerify, true); email.addEventListener('blur', emailVerify, true); password.addEventListener('blur', passwordVerify, true); // validation function function Validate() { // validate username if (username.value == "") { username.style.border = "1px solid red"; document.getElementById('username_div').style.color = "red"; name_error.textContent = "Usernames is required"; username.focus(); return false; } // validate username if (username.value.length < 3) { username.style.border = "1px solid red"; document.getElementById('username_div').style.color = "red"; name_error.textContent = "Username must be at least 3 characters"; username.focus(); return false; } // validate email if (email.value == "") { email.style.border = "1px solid red"; document.getElementById('email_div').style.color = "red"; email_error.textContent = "Emails is required"; email.focus(); return false; } // validate password if (password.value == "") { password.style.border = "1px solid red"; document.getElementById('password_div').style.color = "red"; password_confirm.style.border = "1px solid red"; password_error.textContent = "Passwords is required"; password.focus(); return false; } // check if the two passwords match if (password.value != password_confirm.value) { password.style.border = "1px solid red"; document.getElementById('pass_confirm_div').style.color = "red"; password_confirm.style.border = "1px solid red"; password_error.innerHTML = "The two passwords do not match"; return false; } } // event handler functions function nameVerify() { if (username.value != "") { username.style.border = "1px solid #5e6e66"; document.getElementById('username_div').style.color = "#5e6e66"; name_error.innerHTML = ""; return true; } } function emailVerify() { if (email.value != "") { email.style.border = "1px solid #5e6e66"; document.getElementById('email_div').style.color = "#5e6e66"; email_error.innerHTML = ""; return true; } } function passwordVerify() { if (password.value != "") { password.style.border = "1px solid #5e6e66"; document.getElementById('pass_confirm_div').style.color = "#5e6e66"; document.getElementById('password_div').style.color = "#5e6e66"; password_error.innerHTML = ""; return true; } if (password.value === password_confirm.value) { password.style.border = "1px solid #5e6e66"; document.getElementById('pass_confirm_div').style.color = "#5e6e66"; password_error.innerHTML = ""; return true; } }
<?php include('server.php') ?> <!DOCTYPE html> <html> <head> <title>Registration system PHP and MySQL</title> <!-- <link rel="stylesheet" type="text/css" href="style.css"> --> </head> <body> <div class="header"> <h2>Register</h2> </div> <form method="post" action="register.php" onsubmit="return Validate()" name="vform"> <?php include('errors.php'); ?> <div class="input-group" id="username_div"> <label>Username</label> <input type="text" name="username" class="textInput" value="<?php echo $username; ?>"> <div id="name_error"></div> </div> <div class="input-group" id="email_div"> <label>Email</label> <input type="email" name="email" class="textInput" value="<?php echo $email; ?>"> <div id="email_error"></div> </div> <div class="input-group" id="password_div"> <label>Password</label> <input type="password" class="textInput" name="password_1"> </div> <div class="input-group" id="pass_confirm_div"> <label>Confirm password</label> <input type="password" class="textInput" name="password_2"> <div id="password_error"></div> </div> <div class="input-group"> <input type="submit" name="register" value="Register" class="btn"> </div> <p> Already a member? <a href="login.php">Sign in</a> </p> </form> </body> </html> <script type="scripts.js"></script>
1 个解决方案
解决方案1
0 已采纳 2018-09-23 07:04:29
你可以试试这个
var username = document.forms['vform']['username']; var email = document.forms['vform']['email']; var password = document.forms['vform']['password_1']; var password_confirm = document.forms['vform']['password_2']; // SELECTING ALL ERROR DISPLAY ELEMENTS var name_error = document.getElementById('name_error'); var email_error = document.getElementById('email_error'); var password_error = document.getElementById('password_error'); // SETTING ALL EVENT LISTENERS username.addEventListener('blur', nameVerify, true); email.addEventListener('blur', emailVerify, true); password.addEventListener('blur', passwordVerify, true); // validation function var isValidate=true; function Validate() { // validate username if (username.value == "") { username.style.border = "1px solid red"; document.getElementById('username_div').style.color = "red"; name_error.textContent = "Usernames is required"; username.focus(); isValidate&=false; } // validate username if (username.value.length < 3) { username.style.border = "1px solid red"; document.getElementById('username_div').style.color = "red"; name_error.textContent = "Username must be at least 3 characters"; username.focus(); isValidate&=false; } // validate email if (email.value == "") { email.style.border = "1px solid red"; document.getElementById('email_div').style.color = "red"; email_error.textContent = "Emails is required"; email.focus(); isValidate&=false; } // validate password if (password.value == "") { password.style.border = "1px solid red"; document.getElementById('password_div').style.color = "red"; password_confirm.style.border = "1px solid red"; password_error.textContent = "Passwords is required"; password.focus(); isValidate&=false; } // check if the two passwords match if (password.value != password_confirm.value) { password.style.border = "1px solid red"; document.getElementById('pass_confirm_div').style.color = "red"; password_confirm.style.border = "1px solid red"; password_error.innerHTML = "The two passwords do not match"; isValidate&=false; } return !(!isValidate); } // event handler functions function nameVerify() { if (username.value != "") { username.style.border = "1px solid #5e6e66"; document.getElementById('username_div').style.color = "#5e6e66"; name_error.innerHTML = ""; return true; } } function emailVerify() { if (email.value != "") { email.style.border = "1px solid #5e6e66"; document.getElementById('email_div').style.color = "#5e6e66"; email_error.innerHTML = ""; return true; } } function passwordVerify() { if (password.value != "") { password.style.border = "1px solid #5e6e66"; document.getElementById('pass_confirm_div').style.color = "#5e6e66"; document.getElementById('password_div').style.color = "#5e6e66"; password_error.innerHTML = ""; return true; } if (password.value === password_confirm.value) { password.style.border = "1px solid #5e6e66"; document.getElementById('pass_confirm_div').style.color = "#5e6e66"; password_error.innerHTML = ""; return true; } }
<div class="header"> <h2>Register</h2> </div> <form method="post" action="register.php" onsubmit="return Validate()" name="vform"> <?php include('errors.php'); ?> <div class="input-group" id="username_div"> <label>Username</label> <input type="text" name="username" class="textInput" value="<?php echo $username; ?>"> <div id="name_error"></div> </div> <div class="input-group" id="email_div"> <label>Email</label> <input type="email" name="email" class="textInput" value="<?php echo $email; ?>"> <div id="email_error"></div> </div> <div class="input-group" id="password_div"> <label>Password</label> <input type="password" class="textInput" name="password_1"> </div> <div class="input-group" id="pass_confirm_div"> <label>Confirm password</label> <input type="password" class="textInput" name="password_2"> <div id="password_error"></div> </div> <div class="input-group"> <input type="submit" name="register" value="Register" class="btn"> </div> <p> Already a member? <a href="login.php">Sign in</a> </p> </form>
为什么我的Javascript验证不起作用？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.