logo标签列表

JavaScript onchange验证，以便:valid和:invalid CSS选择器起作用。

javascripthtmlcssvalidation
4
这似乎是一件简单的事情，但我并没有找到相关的资料。如何使用以下内容：
// html: <input type="text" onchange="validate()">
function validate(e) {
    e.preventDefault();

    if(isValid(this.value)) {
        // make valid somehow
    } else {
        // make invalid somehow
    }
}

这样以下CSS代码才能按照您的预期工作：

input:valid {
    background: green;
}

input:invalid {
    background: red;
}
4个回答
8

点击“运行代码片段”查看！

您可以创建自定义验证器并在元素上使用setCustomValidity函数来允许使用这些选择器。

这篇文章介绍了如何使用HTML5约束API来实现这一点。

示例：

#inputField:valid {
  background-color: green;
}

#inputField:invalid {
  background-color: red;
}
<html>
  <body>
    Type a value (must be 'abc'): <input id="inputField">
    <script type="text/javascript">
      function validateField() {
        if (this.value !== 'abc') {
          this.setCustomValidity('Value must be abc!');
        }
        else {
          this.setCustomValidity('');
        }
      }
      window.onload = function () {
        document.getElementById("inputField").oninput= validateField;
      }
    </script>
  </body>
</html>

0
你是否在寻找类似这样的东西？
// html: <input type="text" onchange="validate()">
function validate(e) {
    e.preventDefault();
    var target = e.target

    if(isValid(this.value)) {
        target.classList.add("valid")
        target.classList.remove("invalid")
    } else {
        target.classList.remove("valid")
        target.classList.add("invalid")
    }
}
0

function validateField(event) {
  event.preventDefault();
  var target = event.currentTarget
  if (target.value != "" || target.value.length > 0) {
    target.classList.remove("invalidFunction");
    target.classList.add("validFunction");
  } else {
    target.classList.add("invalidFunction");
    target.classList.remove("validFunction");
  }
};
.invalidFunction {
  border-color: red;
}

.validFunction{
  border-color: green;
}
Field is mandatory:

<input id="inputFunctionField" onchange="validateField(event)">

-1

如果您愿意，可以只使用CSS类（我还添加了使用jQuery添加类和删除类的语法，但也可以使用纯JavaScript完成）。

input.valid {
  background: green;
}

input.invalid {
  background: red;
}

function validate(e) {
    e.preventDefault();   
    if(isValid(this.value)) {
       $(this).removeClass("invalid");
       $(this).addClass("valid");
    } else {
       $(this).removeClass("valid");
       $(this).addClass("invalid");
        // make invalid somehow
    }
}

没有使用jQuery（假设当前没有使用其他类。因为这似乎是您拥有的HTML，如果有其他类，请操纵字符串以添加和删除相关类）。

function validate(e) {
        e.preventDefault();   
        if(isValid(this.value)) {
           this.className = "valid"
        } else {
           this.className = "invalid"
            // make invalid somehow
        }
    }
据我所知，removeClass()和addClass()是jQuery方法。原帖中没有提到使用jQuery。 - Sparky
@Sparky，我也添加了none jquery。 - Dory Zidon
1
这是一个容易操作的解决方案，谢谢。不过我还是很好奇是否有一种方法可以使用 :valid 和 :invalid 伪类选择器来实现，而不是通过类来实现，或者从 JavaScript 中实现是否不可能。 - lowtex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接