Question

尝试在我的登录表单中添加验证。

验证确保两个字段都有值，并且它们都超过4个字符且低于13。

但是每当他们输入应该有用的用户名和密码时，警报仍然会说他们需要输入5到12个字符之间的信息。

function validateForm() {
    var x = document.forms["logindetails"]["username"].value;
    var y = document.forms["logindetails"]["password"].value;
    if (x == "" || y == "") {
        alert("Username and password must be filled out");
    } else if ((x > 4 && x < 13) && (y > 4 && y < 13)) {
      makeCookies();
    } else{
      alert("Username and password must be between 5 and 12 characters");
    }
}
 
 
 //function within the validateform function
 function makeCookies(){
    var visitorusername = document.logindetails.username.value;
    var visitorpassword = document.logindetails.password.value;
    SetCookie("usernamecookie",visitorusername);
    SetCookie("passwordcookie",visitorpassword);
    alert("User Account Created!");
    window.location.replace('LoginRegistration.html');
}

<div class ="logincredentials">
      Account Details
      <br><br>
      <form name="logindetails">
      <input type="text" name="username" placeholder="Username" pattern="[a-zA-Z]{5,12}" title="Please enter more than 5 characters and less than 12">
      <br><br>
      <input type="password" name="password" placeholder="Password">
      <br><br>
      <button type="button" class="loginbuttons" onclick="validateForm();" >Sign up</button>
      <br><br>
      <input type="reset" class="loginbuttons" value="Reset details">
      <br><br>
      <button type="button" class="loginbuttons" onclick="location.href='LoginRegistration.html'" >Return to Log In</button>
      </form>
    </div>

我哪里错了？

Answer 1

您需要检查字符串的长度，而不是字符串本身。

更改此

} else if ((x > 4 && x < 13) && (y > 4 && y < 13)) {

到这个

} else if ((x.length > 4 && x.length < 13) && (y.length > 4 && y.length < 13)) {

Answer 2

您可以在输入标签上设置minLength，maxLength和必需属性

<form>
<input type="text" minLength="4" maxLength="13" required>

<button type="submit">Submit</button>


</form>

Answer 3

您不是要比较字符串的长度，而是要比较字符串本身。您可能希望使用.length。

这是一个有效的演示：

＆＃13;

function validateForm() {
    var x = document.forms["logindetails"]["username"].value;
    var y = document.forms["logindetails"]["password"].value;
    if (x == "" || y == "") {
        alert("Username and password must be filled out");
    } else if ((x.length > 4 && x.length < 13) && (y.length > 4 && y.length < 13)) {
      makeCookies();
    } else{
      alert("Username and password must be between 5 and 12 characters");
    }
}
 
 
 //function within the validateform function
 function makeCookies(){
    var visitorusername = document.logindetails.username.value;
    var visitorpassword = document.logindetails.password.value;
    SetCookie("usernamecookie",visitorusername);
    SetCookie("passwordcookie",visitorpassword);
    alert("User Account Created!");
    window.location.replace('LoginRegistration.html');
}

＆＃13;

<div class ="logincredentials">
      Account Details
      <br><br>
      <form name="logindetails">
      <input type="text" name="username" placeholder="Username" pattern="[a-zA-Z]{5,12}" title="Please enter more than 5 characters and less than 12">
      <br><br>
      <input type="password" name="password" placeholder="Password">
      <br><br>
      <button type="button" class="loginbuttons" onclick="validateForm();" >Sign up</button>
      <br><br>
      <input type="reset" class="loginbuttons" value="Reset details">
      <br><br>
      <button type="button" class="loginbuttons" onclick="location.href='LoginRegistration.html'" >Return to Log In</button>
      </form>
    </div>

＆＃13;

Answer 4

如果要获取值的长度，则需要更改：

(x > 4 && x < 13) && (y > 4 && y < 13)

要：

(x.length > 4 && x.length < 13) && (y.length > 4 && y.length < 13)

Javascript表单验证用户名和密码

4 个答案: