JavaScript表单验证（输入）

Question

我有两个表和函数。函数validate（）验证用户名字符长度，并检查名称是否已存在于数组中。

Function myFunction（）与oninput一起使用，并输出我在用户名文本字段中输入的文本。我想以显示表单验证/输入文本时出现的错误的方式进行更改，如果您理解我的意思。

我唯一的问题是“ x”。如何将“ if”和“ for”验证用作变量，这样输出将是错误的。

希望您能理解这个概念。

<table>
    <tr>
        <td>Username:<input type="text" id="myInput" oninput="myFunction()"></td>
        <td><p id="demo"></p></td>
    </tr>
</table>

<form onsubmit="return validacija()">   
        <table>
            <tr>
                <td>Uporabniško ime:</td>
                <td><input type="text" id="upor_ime" name="upor_ime"></td>             
            </tr>           
        </table>
</form>

<script>
    function myFunction() {
       var x = document.getElementById("myInput").value;
       document.getElementById("demo").innerHTML = x;
    }

    function validacija(){
            var upor_ime = document.getElementById("upor_ime");         
            var polje_imen = ["Tilen","Marko","Teja","Tisa","Rok","Luka","Mojca"];

            if (upor_ime.value.length <= 20 && upor_ime.value.length >= 3) {} 
            else {
                    alert("Username has to be between 3-20 characters.");
                }

            for (let i = 0; i < polje_imen.length; i++) {
                if (polje_imen[i] == upor_ime.value) {
                    alert("Uporabniško ime že obstaja.");
                }
            }
       }     
</script>

Answer 1

<Form>标签和input事件

---

HTMLFormControlsCollection

• 在所有相关的form controls周围加上<form>标记
• 使用Document.forms属性引用<form>标签。
• 使用HTMLFormElement.elements属性收集所有<form>标记的表单控件。

参考： JavaScript and Forms Tutorial

---

Form & Form Control Events

除了click，<form>标签和表单控件之类的常见事件之外，还有一些独占事件：

<form>

• submit
• reset

<input>，<textarea>

• change（包括<select>）
  • 触发器：：用户必须在表单控件中输入数据或更改其值，然后单击表单控件本身以外的任何地方。
• input
  • 触发器：：用户将数据输入到表单控件中。

---

Event Handling

Onevent Handlers

• 尝试避免使用onevent属性处理程序：

  <form id='xForm' onsubmit="return validate()">
  

• 尽管不建议这样做，但onevent属性处理程序是更好的选择：

  document.forms.xForm.onsubmit = validate;
  

  我个人更喜欢使用前面提到的事件处理程序，因为它的语法简洁。
  
  

• 推荐的事件处理方式是使用event listeners：

  document.forms.xForm.addEventListener('submit', validate);
  

---

避免使用alert()

alert()辅助，使用console.log()

---

演示

var xF = document.forms.xForm;
var fields = xF.elements;
var xI = fields.xInput;
var xM = fields.xMessage;

xF.oninput = validate;

function validate(e) {
  var names = ["tilen", "marko", "teja", "tisa", "rok", "luka", "mojca"];
  for (let i = 0; i < names.length; i++) {
    if (names[i] === xI.value.toLowerCase()) {
      return log(xI.value + " že obstaja.");
    }
  }
  if (xI.value.length > 20 || xI.value.length < 3) {
    return log("uporabniško ime mora biti vsaj 3 in ne sme biti daljše od 20 znakov.");
  } else {
    return log('');
  }
}

function log(msg) {
  var color = msg === '' ? 'black' : 'red';
  Array.from(fields).forEach(function(fc) {
    fc.style.color = color;
  });
  xM.value = msg.charAt(0).toUpperCase() + msg.slice(1).toLowerCase();
  return false;
}

html,
body {
  font: 400 14px/1.5 Consolas;
}

th {
  text-align: left;
  vertical-align: top;
  width: 150px;
}

input,
output {
  font: inherit;
  display: inline-block;
  width: 96%;
}

#xInput {
  transform: translateY(-3px);
  padding: 0 3px;
}

<form id='xForm' width='100%'>

  <table width='100%'>
    <tr>
      <th title="Username">Uporabniško Ime:</th>
      <td><input id="xInput" type="text" autocomplete="off"></td>
    </tr>
    <tr>
      <th title="Error Message">Obvestilo O Napaki:</th>
      <td><output id="xMessage"></output></td>
    </tr>
  </table>

</form>