修剪 "input field"

Question

我正在尝试创建一个表单验证函数，我在 input 字段上使用 forEach。

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 等，所以我不能 trim 它们。

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

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

谢谢。

Answer 1

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

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

例如：

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

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

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

Answer 2

在这段代码中

const inputT = input.value.trim();

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

然后更新此代码：

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

有了这个：

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

修剪 "input field"

triming an "input field"

javascript

input

trim