Javascript 密码验证至少为6个字符

我为密码编写了一些验证代码，并确认密码以检查它们是否匹配。此外，还有一个条件检查我的密码长度是否少于6个字符，如果少于6个字符，则写入/显示错误。但是我的代码不能正常工作：当我切换到字段2时，字段1的条件没有被检查，如果两个条件都正确，错误仍然出现

这是我的密码：

函数checkPass（）
{
var pass1=document.getElementById（'pass1'）；
var pass2=document.getElementById（'pass2'）；
var message=document.getElementById（'error-nwl'）；
var goodColor=“#66cc66”；
var badColor=“#ff6666”；
if（pass1.value==pass2.value）{
pass2.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“确定！”
}
否则{
pass2.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“这些密码不匹配”
}
如果（pass1.length>5）{
pass1.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“字符号确定！”
}
否则{
pass1.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“您必须输入至少6位数字！”
}
}

试试这个：

if(pass1.value.length > 5)

---

当您检查pass1的长度时，实际上并没有检查它的值-

pass1.length>5

-您应该将其更改为

pass1.value.length>5

函数checkPass（）
{
var pass1=document.getElementById（'pass1'）；
var pass2=document.getElementById（'pass2'）；
var message=document.getElementById（'error-nwl'）；
var goodColor=“#66cc66”；
var badColor=“#ff6666”；
if（pass1.value==pass2.value）{
pass2.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“确定！”
}
否则{
pass2.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“这些密码不匹配”
}
如果（pass1.value.length>5）{
pass1.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“字符号确定！”
}
否则{
pass1.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“您必须输入至少6位数字！”
}
}

您可以执行以下操作：

if (pass1.value.trim().length > 5)

之前：

 if(pass1.length > 5)

之后：

 if(pass1.value.length > 5)

你应该检查所有匹配后的相等性，如长度或允许字符等

函数checkPass（）
{
var pass1=document.getElementById（'pass1'）；
var pass2=document.getElementById（'pass2'）；
var message=document.getElementById（'error-nwl'）；
var goodColor=“#66cc66”；
var badColor=“#ff6666”；
if（pass1.value.length>5&&pass2.value.length>5）
{
pass1.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“字符号确定！”
if（pass1.value==pass2.value）
{
pass2.style.backgroundColor=goodColor；
message.style.color=goodColor；
message.innerHTML=“确定！”
}
其他的
{
pass2.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“这些密码不匹配”
}
}
其他的
{
pass1.style.backgroundColor=badColor；
message.style.color=badColor；
message.innerHTML=“您必须输入至少6位数字！”
}
}

确保不应用trim（），因为trim将删除空格，并且密码中的空格不是有效字符。

生成表单验证 何时验证？ 首先，我们需要在三个地方进行验证：

• 在用户提交时验证表单
• 用户编辑字段时验证字段
• 服务器接收数据时验证数据

我们需要在服务器端验证数据的原因（不管其他两个验证有多好）是因为恶意用户可以访问HTML和JavaScript代码、伪造请求或通过其他方式绕过客户端验证

如果验证将在服务器端进行，为什么我们需要客户端验证？简而言之，客户端验证减少了错误提交的数量，从而减少了流量。第二个动机是客户端验证允许更快更容易地向用户提供反馈

话虽如此，目前的帖子将只处理客户端验证

现在，为了运行验证代码，我们需要处理适当的事件。在JavaScript中添加事件处理程序的推荐方法是调用目标元素。遗憾的是，在旧版本的Internet Explorer上不太好

因此，我们将从中提取代码以添加事件处理程序：

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

注意：是Microsoft的专有扩展

---

现在我们需要决定要处理的事件

最初的诱惑是处理场的每一个细微变化。这样做的缺点是，只需输入一个字符，系统可能会告诉用户它是错误的（因为该值太短或其他原因）。这可能会被解释为，如果输入的单个字符是错误的，那么用户会在处理之前停止解析错误

显示了使用“模糊”事件（失去焦点）进行验证可以让用户更快地填写表单

以下是文章的摘录：

（……）当简单的问题出现时，参与者会感到困惑

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

form.setAttribute('novalidate', 'novalidate');

valid=pass1.value.search(/^[A-Za-z0-9@_]{6,20}$/);

if(valid != 0){
    message.innerHTML="Invalid Password.";
}else if(pass1.value.length < 6){
      message.innerHTML = " you have to enter at least 6 digit!"
}

if (pass1.value.length > 5)

var pass1 = document.getElementById('pass1');

if ( pass1.length > 5 ) {...

var pass1 = document.getElementById('pass1');

if ( pass1.value.length > 5 ) {...

if (password length is less than 6)
  inform user that password should be at least 6 characters
else if (passwords do not match)
  ask user to confirm password
else
  inform user that passwords match, all is ok

if (passwords match)
  inform user that passwords match, all is ok
else
  inform user that passwords do not match

if (password is more than 5 characters)
  inform user that the password is long enough
else
  inform user that the password should be at least 6 characters

regex = pass1.value.search(/^[a-zA-Z0-9+&@#/%?=~_|!:,.;]{6,}+$/);

if(regex){
    message.innerHTML="Invalid Password.";
}else{
    message.innerHTML = " you have to enter at least 6 digit!";
}

if(user>0 and user<5){//output username should be 6}
if(pass>0 and pass<5){//output password should be 6}
if(user>5 and pass>5){
    if(user==pass){//password match}
    else{//invalid password}
}