使用javascript设置文本输入字段所需的最小长度

Question

我希望能够根据用户输入的字符数进行验证——我希望至少有7个字符。(最大值是使用HTML属性设置的(-我尝试了以下操作：

v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (val >= 3 || val == 0) {
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else if (v3.value.length === 7){
v3.style.borderColor = "green";
flag3 = true;
}
}

以上内容在一定程度上起作用。如果输入了7个字符，则输入字段的边框颜色将仅显示为绿色。但是，如果从该点开始删除字符，则边框将保持为绿色。感谢在这件事上的任何帮助。

Answer 1

我不完全确定你想要什么；这接近你想要的吗？

您可能已经这样做了，但没有将其包含在代码段中，但我们需要在每次编辑表单时都运行它。我们在输入中添加一个事件侦听器。

const input = document.getElementById('npo-registration-number');
input.addEventListener('input', () => {
// set the border to red if the value is < 7 characters
if (input.value.length < 7) {
input.style.borderColor = 'red';
return;
}
// otherwise, set it to green
input.style.borderColor = 'green';
});

这修复了一个问题：除非表单的值是空字符串，否则不会将边框的颜色设置为红色。相反，当输入长度低于7时，我们希望边界为红色。

Answer 2

这是因为你的条件

if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}

当您开始删除输入中的字符时，您的输入不会再次变为红色，因为只有当没有字符时它才会变为红色，并且在输入7个字符后它会变为绿色。

Answer 3

您需要捕获input事件，以便js能够评估和更新。https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

const ev3 = document.getElementById("npo-registration-number");
let flag3 = true;
ev3.addEventListener('input', (e) => {
const val = e.target.value;
if (val.length === 7){
ev3.style.borderColor = "green";
flag3 = true;          
}
else {
ev3.style.borderColor = "red";
flag3 = true;   
}
});

input {
outline: 0;
border: 1px solid;
}

<input id="npo-registration-number" type='text'>

Answer 4

您只需使用将为其运行此功能的按钮，如send或post按钮(许多站点使用此方法(。

function click(){
v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (val >= 3 || val == 0) {
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else if (v3.value.length === 7){
v3.style.borderColor = "green";
flag3 = true;
}
}
}

Answer 5

请尝试

v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
} else {

if (v3.value.length < 7){
v3.style.borderColor = "red";
flag3 = false;
}
else {
v3.style.borderColor = "green";
flag3 = true;
}
}