简单的表单验证需要Javascript帮助

时间:2015-12-14 04:00:31

标签: javascript html forms validation passwords

我目前正在尝试使用JS创建一个非常简单的验证脚本。基本上,如果输入到表单中的文本短于5个字符或超过25个字符,我想要提醒。

     <!doctype html>
     <html>
       <head>
       <title>Password Validator</title>
       </head>

      <body>
        <script>
        function validate()
        {  
        var yourpw = document.forms.passwordform.yourpassword.length; 

        if (yourpw < 5);
        {
        alert("password is too short");   
        return false;
        }

        if (yourpw > 25)
        {
        alert("your password is too long")
        return false;
        }
        }
        </script>


        <h1>Password Validator</h1>
        <p>Please create a new password below</p>
        <p>Be sure you password follows these guidelines</p>
        <ul>
          <li>No shorter than 5 characters</li>
          <li>No longer than 25 characters</li>
        </ul>

         <br>

         <form name="passwordform" method="post" onsubmit="validate();">
         <input type="text" name="yourpassword">
         <br>
         <input type="submit">
         </form>    

       </body>
    </html>   

我不确定我到底错过了什么或为什么它不会工作但我想要的目标是当文本输入到名为&#34; yourpassword&#34;的文本框中时,将运行一个脚本如果满足以下任一条件,则显示一条消息:短于5个字符或超过25个,警告输入密码不符合指南的人,如果密码符合指南,那么我只需要一条简单的确认消息出现。无论如何,我感谢任何帮助,因为这让我感到沮丧,让我想放弃学习JS。感谢

4 个答案:

答案 0 :(得分:2)

您需要先阻止表单提交的默认行为。

使用

 function validate(e)
     {  
        e.preventDefault();
        var yourpw = document.forms.passwordform.yourpassword.value.length; 
       ... rest of code
}

答案 1 :(得分:0)

尝试将验证功能更新为:

  function validate(e) {
    e.preventDefault();
    var yourpw = document.getElementsByName('yourpassword')[0].value.length;

    if (yourpw < 5) {
        alert("password is too short");
        return false;
    }

    if (yourpw > 25) {
        alert("your password is too long")
        return false;
    }
}

您需要获取输入字段值,如上所述,输入字段没有长度(@Xufox)以及阻止表单提交的默认行为。

编辑:

完整的工作示例:

<!doctype html>
<html>

<head>
    <title>Password Validator</title>
</head>

<body>
    <script>
    function validate(e) {
        e.preventDefault();
        var yourpw = document.getElementsByName('yourpassword')[0].value.length;

        if (yourpw < 5); {
            alert("password is too short");
            return false;
        }

        if (yourpw > 25) {
            alert("your password is too long")
            return false;
        }
    }
    </script>
    <h1>Password Validator</h1>
    <p>Please create a new password below</p>
    <p>Be sure you password follows these guidelines</p>
    <ul>
        <li>No shorter than 5 characters</li>
        <li>No longer than 25 characters</li>
    </ul>
    <br>
    <form name="passwordform" method="post" onsubmit="validate(event);">
        <input type="text" name="yourpassword">
        <br>
        <input type="submit">
    </form>
</body>

</html>

答案 2 :(得分:0)

使用此:但是将id name yourpassword输入到输入字段..这样您就可以轻松获取值

require(dplyr)
DistanceOutput <- df %>%
arrange(Name,Sample,Location) %>%
group_by(Name,Location) %>%
mutate( lagX = dplyr::lag(X, order_by=Sample), lagY = dplyr::lag(Y, order_by=Sample)) %>%
rowwise() %>%
mutate(Distance = dist( matrix( c(X,Y,lagX,lagY),nrow=2,byrow=TRUE) )) %>%
select(-lagX, -lagY)
DistanceOutput
Source: local data frame [9 x 6]
Groups: <by row>

      Name Sample Location     X      Y Distance
     (chr)  (dbl)    (chr) (dbl)  (dbl)    (dbl)
1 Client A      1     City  4.35 -15.43       NA
2 Client A      2     City -5.70 -19.67   10.908
3 Client A      3     City  3.60 -20.49       NA
4 Client B      1  Country  4.36 -15.44       NA
5 Client B      2  Country -5.70 -19.67   10.913
6 Client B      3  Country  3.59 -18.95    9.318
7 Client C      1 Suburban  4.42 -16.31       NA
8 Client C      2 Suburban -5.75 -15.18   10.233
9 Client C      3 Suburban  3.57 -18.97   10.061

答案 3 :(得分:-1)

您可以通过RegExp轻松验证表格 使用此函数验证5个字符的限制。

var pw = document.getElementById("yourpassword").value;
function isValidatePW(PW){
var pwRegExp - /\d{5}/
return pwRegExp.test(PW);
}