Question

我一直在尝试使用JavaScript创建登录表单。我的登录表单需要使用JavaScript验证执行以下操作

登录字段仅包含最少4个字母且最多6个字母的字母
密码长度不超过5个字符且不超过7个字符，且仅包含至少包含1个字母和至少1个数字的字母和数字
如果数据不正确，请生成一个适当的警报窗口消息并将光标设置为错误的输入字段，并且需要将表单提交到需要针对文本文件进行验证的php文件

我尝试使用正则表达式来检查javascript中的登录字段和密码，我使用了登录.php但到目前为止还没有做任何事情。但是我在下面粘贴了我的JavaScript / HTML文件似乎不起作用。谁能告诉我我的文件有问题？

<html>
<head>
<script>
function validateFormOnSubmit(theForm) {

  reason += validateUsername(theForm.username.value)
  reason += validatePassword (theForm.pwd.value)
  if (reason == "") return true 
 else { alert(reason); return false }

}

function validateUsername(fld) {
   if (fld == "")
      return "No username entered"

   else if((fld.length > 6) || (fld.length < 4 ))
      return "value must be between 4 and 6 characters"

  else if (/[^a-zA-z]/.test(fld))
       return "only  letters  allowed"

}
function validatePassword (fld){
if (fld == ""){
   return "No password entered";
}
else if (fld.length<5 ||fld.length>7 ) {
 return "length shoild be b/w 4 and 7";
}
else if (!/[a-z]/.test(fld) || !/[A-Z]/.test(fld) || !/[0-9]/.test(fld)){
    return "passwords rewuire one of the letters or digitys";
}
}
</script>
</head>
<body>
<table class ="signup" border ="o" cellpadding ="2"
 cellspacing ="5" bgcolor ="eeeeee">
<th colspan="2" align="center">SignupForm</th>
<form method = "post" action ="login.php" onSubmit="return validateFormOnSubmit(this)">
 <tr>  
<td>Your user name:</td>
<td><input name = "username" size="35" maxlength="50" type="text"></td>
 </tr>
 <tr> 
 <td>Your Password:</td>  
 <td><input name="pwd" size="35" maxlength="25" type="password"></td>
</tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr>
</form>
</table>
</body>
</html>

Answer 1

在您的validatePassword函数中，您的逻辑被搞砸了。你有：

else if (!/[a-z]/.test(fld) || !/[A-Z]/.test(fld) || !/[0-9]/.test(fld)){
    return "passwords rewuire one of the letters or digitys";
}

基本上说如果没有小写字母，大写字母和数字则会失败。将大写和小写字母检查分组为一个逻辑分组，如下所示：

else if ( ( !/[a-z]/.test(fld) && !/[A-Z]/.test(fld) ) || !/[0-9]/.test(fld)){
    return "passwords rewuire one of the letters or digitys";
}

现在说只要有一个字母（大写或小写）和一个数字，那么我们就擅长验证。你可以进一步压缩到这样的东西：

if ( !/[a-zA-Z]/.test(fld) || !/[0-9]/.test(fld)){
    return "passwords rewuire one of the letters or digitys";
}

现在，如果要实现突出显示验证失败字段的功能，则需要重新构建代码。这样做的一种方法是做这样的事情：

function validateFormOnSubmit(theForm) {
    var alertMsg = false,
        errMsg = validateUsername(theForm.username.value);
    if (errMsg !== true) {
        // highlight theForm.username by changing style or class
        // set focus to this field
        theForm.username.focus();
        alertMsg = errMsg;
    }
    errMsg = validatePassword(theForm.pwd.value);
    if (errMsg !== true) {
        // highlight theForm.username by changing style or class
        // set focus to this field
        theForm.username.focus();
        alertMsg += errMsg;
    }
    if (alertMsg !== false) return true
    else {
        alert(alertMsg);
        return false;
    }
}

function validateUsername(fld) {
    if (fld == "") return "No username entered"
    else if ((fld.length > 6) || (fld.length < 4)) return "value must be between 4 and 6 characters"
    else if (/[^a-zA-z]/.test(fld)) return "only  letters  allowed"
    return true;
}

function validatePassword(fld) {
    if (fld == "") {
        return "No password entered";
    } else if (fld.length < 5 || fld.length > 7) {
        return "length shoild be b/w 4 and 7";
    } else if (!/[a-zA-z]/.test(fld) || !/[0-9]/.test(fld)) {
        return "passwords rewuire one of the letters or digitys";
    }
    return true;
}

不是最漂亮的方法，但我认为你明白了。根据需要突出显示该字段，并注意如果用户名和密码有问题，则密码字段是获得焦点的字段。

使用javascript和php登录表单验证

1 个答案: