向文本字段添加 JavaScript 最小長度驗證？

Question

當用戶輸入字母 az 時，我目前正在使用 JavaScript 代碼來驗證文本字段。 如果這是有效的，腳本會顯示一個勾號，如果無效則顯示一個叉號。 現在我試圖添加到代碼中，檢查字母是否滿足至少 4 個字符的最小長度，如果滿足最小字符則顯示勾號，如果文本在最小字符長度下顯示十字。

如何調整我的腳本以檢查輸入字符的最小長度？ 也有人可以告訴我如何在我的驗證中允許“-”？

腳本：

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 

        if (reg.test(CnameField.value) == false) 
        {
            document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

試過：

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 
        var len = {min:4,max:60};


        if (reg.test(CnameField.value) == false) 
        if(input.value.length>!=len.min) return flase;
        {
            document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
            document.getElementById("emailCross").style.display='block';
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

Answer 1

差不多了，但是你有一些語法問題，所以我為你創建了一個示例測試腳本：

function validateValue(value) {
  var reg = /^[A-Za-z]+$/g; 
  var len = {min:4,max:60};

  if (!reg.test(value)) {
    console.log('didn\'t match regex');
    return false;
  }

  if (value.length < len.min || value.length > len.max) {
    console.log('incorrect length: ' + value);
    return false;
  }

  console.log('correct length: ' + value);
  return true;
}

validateValue('teststring');

請注意我如何設置正則表達式測試，刪除 == false？ 不需要它，因為返回了 false 或 array。 如果返回 null 或 false 以外的任何內容，則真測試將返回真。

Answer 2

嘗試這個

<script>
function validateCname(CnameField){
        var reg = /^[A-Za-z]+$/; 
        var len = {min:4,max:60};


        if (reg.test(CnameField.value) == false) {
            if(input.value.length<len.min) 
            {
                document.getElementById("emailTick").style.display='none'; // Hide tick if validation Fails
                document.getElementById("emailCross").style.display='block';
                return false;
            }
            return false;
        }
        if (reg.test(CnameField.value) == true)
        document.getElementById("emailCross").style.display='none';
        document.getElementById("emailTick").style.display='block';
        return true;
}
</script>

Answer 3

const validateCname = value => value.length < 4  ?  `success message` : `error message`

Answer 4

function validateCname(value1)
{
var k = value1;
if(k.length<4){

//Your code if length is less than 4 

}else{

//Your code if length is more than 4 

}
}