JavaScript不能正常工作
JavaScript不能正常工作
提问于 2020-11-02 12:36:55
在用户能够单击submit按钮之前，我有这个js代码来验证注册。此功能通过密码字段中的onkeyup="validatePassword()"激活。它要求用户在启用submit按钮之前填写所有必填字段。但是由于某些原因，函数无法识别if (pw.lenght < 6)，我在这里做错了什么？
一些限制:我在这里没有使用表单标签。
function validatePassword() {
var firstname = document.getElementById("firstname").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var pw = document.getElementById("pw").value;
var pwMsg = "";
var msg = "Please fill in the required fields";
console.log(pw.length);
if (pw.length < 6) {
pwMsg = "Password should be between 6 and 8 characters";
document.getElementById("pwMsg").innerHTML = pwMsg;
document.getElementById("register-btn").disabled = true;
} else {
document.getElementById("register-btn").disabled = false;
}
if (firstname == "") {
document.getElementById("firstname").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else {
document.getElementById("register-btn").disabled = false;
}
if (username == "") {
document.getElementById("username").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else {
document.getElementById("register-btn").disabled = false;
}
if (email == "") {
document.getElementById("email").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else {
document.getElementById("register-btn").disabled = false;
}
}<div class="section">
<span style="color: red;"><p id="msg" class="center-align"></p></span>
<div class="input-field col s12 m6">
<input type="text" name="firstname" class="validate" id="firstname" required>
<label for="firstname">First Name</label>
<span id="fname-msg" class="helper-text" data-error="Required"></span>
</div>
<div class="input-field col s12 m6">
<input type="text" name="lastname" class="validate" id="lastname">
<label for="lastname">Last Name</label>
<span id="lname-msg" class="helper-text"></span>
</div>
<div class="input-field col s12 m6">
<select name="gender" id="gender">
<option value="" disabled selected>Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Gender</label>
</div>
<div class="input-field col s12 m6">
<input type="text" name="username" class="validate" id="username" required>
<label for="username">Username</label>
<span id="uname-msg" class="helper-text" data-error="Required"></span>
</div>
<div class="input-field col s12 m6">
<input type="email" name="email" class="validate" id="email" required>
<label for="email">Email</label>
<span id="email-msg" class="helper-text" data-error="Invalid Email"></span>
</div>
<div class="input-field col s12 m6">
<input type="password" name="password" class="validate" maxlength="8" id="pw" onkeyup="validatePassword()" required>
<label for="password">Password</label>
<span style="color: red;"><p id="pwMsg" class="left-align"></p></span>
<span style="color: red;"><s:property value="msg" /></span>
</div>
<div class="col s12 left-align">
<p>
Got an account? Sign in <a href="login">Here</a>
</p>
</div>
<div class="row right-align">
<a href="home" class="waves-effect waves-light btn-flat red-text">CANCEL</a>
<a class="waves-effect waves-light btn modal-trigger indigo darken-4" data-target="confirmation" id="register-btn" onClick="transferRegistration()" disabled>REGISTER</a>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-11-02 13:27:21
代码的问题在于，您已经将验证函数分离到单个if-else语句中。与中一样，您有单独的if-else语句来验证每个单独的字段。
此外，由于每条else语句本质上都影响相同的HTML元素，因此其他语句可以覆盖另一个。我建议删除不必要的else语句，并将一些if语句更改为'else if‘语句
我建议的另一个更改是更改submit按钮的标签。将其从to按钮更改为(它应该与materialize一起使用)
function validatePassword(){
var firstname = document.getElementById("firstname").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var pw = document.getElementById("pw").value;
var pwMsg = "";
var msg = "Please fill in the required fields";
if (pw.length < 6 ){
pwMsg = "Password should be between 6 and 8 characters";
document.getElementById("pwMsg").innerHTML = pwMsg;
document.getElementById("register-btn").disabled = true;
console.log("button disabled")
} else if (firstname == ""){
document.getElementById("firstname").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else if (username == ""){
document.getElementById("username").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else if (email == ""){
document.getElementById("email").focus();
document.getElementById("msg").innerHTML = msg;
document.getElementById("register-btn").disabled = true;
} else {
document.getElementById("pwMsg").innerHTML = "";
document.getElementById("register-btn").disabled = false;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64639840
复制相关文章
相似问题
腾讯云开发者
