Javascript 表单验证 2 个字母 1 个数字

Question

我正在尝试使用 javascript 对我的表单进行验证。 这是我到目前为止所做的，它有效，但在输入中“klassekode”需要以两个字母和一个数字开头。 有人可以帮忙吗？ 谢谢

我的 html 代码

<form class="form1" method="POST" id="registrerFagSkjema" action="registrerklasse.php" name="registrerFagSkjema"  onSubmit="return validerRegistrerFag()">


        Registrer klasse  <br> <br>
        Klassekode <br>
        <input value="" type="text" name="fagkode" id="fagkode"  onFocus="fokus(this)"
                onBlur="mistetFokus(this)" onMouseOver="musInn(this)" onMouseOut="musUt()"
                onChange="endreTilStoreBokstaver(this)"/ /><br>

        Klassenavn <br>
        <input value="" type="text" name="klassenavn" id="klassenavn"   onFocus="fokus(this)"
                onBlur="mistetFokus(this)" onMouseOver="musInn(this)" onMouseOut="musUt()"  />


        <input value="Registrer Klasse" type="submit" name="submit" id="submit" >
        <input type="reset" value="Nullstill" id="reset" name="reset" onClick="fjernMelding()">


</form>

 <div id="melding"></div>

我的 javascript 代码

function validate()

{
  var klassekode = document.getElementById("klassekode");
  var klassenavn = document.getElementById("klassenavn");
  var feilmelding="";
  //var firstTwoLetters = document.getElementById("klassekode").substring(0,2);

  if(klassekode.value.trim()=="")
  { 

    //alert("blank");
    feilmelding="Fyll ut Klassekode";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;

    klassekode.style.border = "solid 1px red";
    return false;
  }
  else if ( klassekode.value.trim().length!=3)
  {
    //alert("klassekode for lang");
    feilmelding="Klassekode må kun være 3 bokstaver";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;
    klassenavn.style.border = "solid 1px red";
    return false;
  }
  else if (klassenavn.value.trim()=="" )
  {
    //alert("blank");
    feilmelding="Fyll ut Klassenavn";
    document.getElementById("melding").style.color="red";
    document.getElementById("melding").innerHTML=feilmelding;
    klassenavn.style.border = "solid 1px red";
    return false;
  }
  else { return true;}
}

Answer 1

您掌握了 substring 的窍门，您可以使用较新的方法isNaN （非数字）并将第三个字符除以 1。如果是字母， isNaN将返回“true”，如果是数字，它将返回“错误的”。

---

但是，我会建议您学习正则表达式，因为它将在将来对您大有裨益。

您基本上创建了一个模式，然后针对该模式测试一个字符串。 如果您找到匹配项，那么它是正确的。 我在下面做了一个片段来演示：

 function validateInput() { let inputElement = document.getElementById("namn"); let divElement = document.getElementById("comment"); var message = "not true"; let inputValue = inputElement.value.trim(); let pattern = new RegExp(/^[a-zøæ]{2}\d{1}/, "i"); if (isValid(inputValue, pattern)) { message = "true" } divElement.innerHTML = message; } function isValid(str, pattern) { return str.match(pattern); }

 <input id="namn" type="input" value=""> <input type="button" onclick="validateInput()" value="Validate" /> <div id="comment"></div>

这一行需要解释：

let pattern = new RegExp(/^\d{1}[a-zøæ]{2}/, "i");

正则表达式包含可以串在一起的表达式：
^：从字符串的开头开始。
[a-zøæ]{2}：2 个字符必须在 az 之间或包含 ø 或 æ。
\d{1}：接下来的 1 个字符必须是数字。

标志“i”使 az 不区分大小写。 另一种方法是不添加标志，而是写 [a-zA-ZøØæÆ]

希望有帮助。

哈哈！

Answer 2

正则表达式来救援。 您可以按以下方式添加另一个else if语句：

else if (klassekode.value.trim().length !== 3) {
    // after checking whether the string length is 3 characters...
} else if (!klassekode.value.trim().match(/^[a-z]{2}\d/i)) {
    // apply validation warning styles
    return false;
}

正则表达式的解释：
^ - 在字符串的开头断言 position
[az] - 匹配一个字母字符
{2} - 完全匹配两次
\d - 匹配一个数字 (0-9) 一次
i - 不区分大小写的匹配

我不再检查字符串长度，因为您之前的条件说明了它。

确保在使用之前trim()值（例如，在将其发送到后端进行处理之前等），否则将保留前导/尾随空格。