JavaScript表单验证：实现Klassekode字段首两位字母加一位数字规则

看起来你已经搭好了表单验证的基础框架，现在只需要给klassekode加上「两个字母开头、后跟一个数字」的格式验证就行。不过先提两个小问题：你的HTML里Klassekode输入框的id是fagkode，但JS里用document.getElementById("klassekode")获取，这会导致元素找不到；另外HTML表单的onSubmit绑定的是validerRegistrerFag，但JS函数名是validate，这也会让验证不触发。我一起帮你修正并添加格式验证：

修正后的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="klassekode" 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>

这里把Klassekode输入框的id改成了klassekode，和JS里的获取逻辑保持一致，同时确保表单提交事件绑定的函数名正确。

修正后的JavaScript代码 #

function validerRegistrerFag() {
  var klassekode = document.getElementById("klassekode");
  var klassenavn = document.getElementById("klassenavn");
  var feilmelding = "";
  
  // 重置之前的错误样式，避免残留状态
  klassekode.style.border = "";
  klassenavn.style.border = "";
  document.getElementById("melding").innerHTML = "";

  if (klassekode.value.trim() === "") {
    feilmelding = "Fyll ut Klassekode";
    klassekode.style.border = "solid 1px red";
  } else if (klassekode.value.trim().length !== 3) {
    feilmelding = "Klassekode må være nøyaktig 3 tegn";
    klassekode.style.border = "solid 1px red";
  } else if (!/^[A-Za-z]{2}\d$/.test(klassekode.value.trim())) {
    feilmelding = "Klassekode må starte med to bokstaver, etterfulgt av ett tall";
    klassekode.style.border = "solid 1px red";
  } else if (klassenavn.value.trim() === "") {
    feilmelding = "Fyll ut Klassenavn";
    klassenavn.style.border = "solid 1px red";
  }

  if (feilmelding) {
    document.getElementById("melding").style.color = "red";
    document.getElementById("melding").innerHTML = feilmelding;
    return false;
  } else {
    return true;
  }
}

关键改动说明： #

1. 统一命名匹配：修正了输入框id和函数名的不匹配问题，确保验证逻辑能正常触发
2. 正则格式验证：用/^[A-Za-z]{2}\d$/这个正则表达式来检查格式：
   • ^ 标记字符串开头
   • [A-Za-z]{2} 匹配任意两个大小写字母
   • \d 匹配一个数字
   • $ 标记字符串结束
3. 用户体验优化：每次验证前重置输入框边框和提示信息，避免上次的错误状态残留
4. 错误文案调整：把原来的“Klassekode må kun være 3 bokstaver”改成更准确的“Klassekode må være nøyaktig 3 tegn”，因为最后一位是数字而非字母

这样修改后，你的klassekode输入框就会严格符合「两个字母+一个数字」的规则，同时保留了原来的空值检查等逻辑。

内容的提问来源于stack exchange，提问作者MarthinHauge