首頁猿問使用 javascript...

使用 javascript 設置文本輸入字段所需的最小長度？

JavaScript

守候你守候我 2023-07-14 15:52:22

我希望能夠根據用戶輸入的字符數來執行驗證 - 我希望至少有 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 個字符時，輸入字段邊框顏色才會顯示綠色。但是，如果我從該點開始刪除字符，邊框將保持綠色。任何有關此事的幫助都將受到贊賞。

查看完整描述

5 回答

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

我不完全確定你想要什么；這接近您要尋找的嗎？

您可能執行了此操作，但沒有將其包含在您的代碼片段中，但我們需要在每次編輯表單時運行它。我們向輸入添加一個事件偵聽器。

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 時，我們希望邊框為紅色。

反對回復 2023-07-14

弒天下

TA貢獻1818條經驗獲得超8個贊

您需要捕獲input事件，以便 js 可以評估和更新。?

? ? 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;

}

反對回復 2023-07-14

波斯汪

TA貢獻1811條經驗獲得超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;

}

反對回復 2023-07-14

呼喚遠方

TA貢獻1856條經驗獲得超11個贊

是因為你的條件

if (v3.value == "") {

v3.style.borderColor = "red";

flag3 = false;

}

當您開始刪除輸入中的字符時，您的輸入不會再次變為紅色，因為僅當沒有字符時它才是紅色，并且輸入 7 個字符后它會變為綠色。

反對回復 2023-07-14

白衣染霜花

TA貢獻1796條經驗獲得超10個贊

請嘗試這個

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;

}

反對回復 2023-07-14

5 回答
0 關注
212 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 javascript 設置文本輸入字段所需的最小長度？

使用 javascript 設置文本輸入字段所需的最小長度？

5 回答

添加回答

使用 javascript 設置文本輸入字段所需的最小長度？