修剪“输入字段”

问题描述

我正在尝试创建表单验证功能，并且在 forEach 字段上使用了 input。

const inputs = document.querySelectorAll("input");
inputs.forEach(function(input){
    input.addEventListener("blur",function (){

        const inputT = input.value.trim();

        if(inputT.validity.valueMissing){
            // e_space is the place where errors are displayed
            if(e_space){
                e_space.textContent = "This field must not be empty.";
                input.classList.add("b-r");
            }
            input.classList.add("input-red");
        }else{
            e_space.textContent = "";
            input.classList.remove("b-r");
        }
}

问题（我认为）是我正在处理字段而不是字段的内容，即：input.addEventListener 等，所以我无法修剪它们。

如上例所示，我尝试使用字段 inputT 的内容创建变量 input.value，对其进行修剪并将其传递给函数。现在我收到一个错误：inputT.validity is undefined

有人可以推荐一种方法来修剪输入字段的值然后运行有效性检查吗？

谢谢。

解决方法

输入元素上存在 .validity 属性，而不是修剪后的字符串。

您需要先将值更新为修剪后的值，然后检查输入字段的有效性。

例如：

input.addEventListener("blur",function (){

        input.value = input.value.trim();

        if(input.validity.valueMissing){
           // ...

在这段代码中

const inputT = input.value.trim();

trim 函数返回一个新字符串，而不是 HTML 元素或（输入元素）所以新字符串没有“有效性”属性。

然后更新此代码：

 const inputT = input.value.trim();
    if(inputT.validity.valueMissing){...}

这样：

input.value = input.value.trim();
if(input.validity.valueMissing){...}

input input javascript trim