JavaScript表单验证

JavaScript表单验证

HTML表单验证可以通过JavaScript完成。如果表单字段（fname）为空，则此函数会警告消息，并返回false，以防止提交表单：

function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

提交表单时可以调用该函数：

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

• JavaScript可以验证数字输入

  JavaScript通常用于验证数字输入：

function myFunction() {
  var x, text;
  // 获取id=“numb”的input字段的值
  x = document.getElementById("numb").value;
  // 如果x不是数字或小于1或大于10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入有效";
  }
  document.getElementById("demo").innerHTML = text;
}

自动HTML表单验证

HTML表单验证可以由浏览器自动执行：如果表单字段（fname）为空，则required属性会阻止提交此表单：

<form action="/jc_script/action.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

自动HTML表单验证在Internet Explorer 9或更早版本中不起作用。

数据验证

数据验证是确保用户输入干净，正确和有用的过程。典型的验证任务是：

• 用户是否填写了所有必填字段？
• 用户是否输入了有效日期？
• 用户是否在数字字段中输入了文本？

大多数情况下，数据验证的目的是确保正确的用户输入。验证可以通过许多不同的方法来定义，并以许多不同的方式进行部署。在将输入发送到服务器之后，服务器端验证由Web服务器执行。在将输入发送到Web服务器之前，客户端验证由Web浏览器执行。

HTML约束验证

HTML5引入了一种称为约束验证的新HTML验证概念。HTML约束验证基于：

• 约束验证HTML input属性
• 约束验证CSS伪选择器
• 约束验证DOM属性和方法

约束验证HTML input属性:

属性	描述
disabled	指定应禁用input元素
max	指定input元素的最大值
min	指定input元素的最小值
pattern	指定input元素的值模式
required	指定input字段需要元素
type	指定input元素的类型

有关完整列表，请转到HTML input属性。

约束验证CSS伪选择器：

伪选择器	描述
:disabled	选择指定了“disabled”属性的input元素
:invalid	选择具有无效值的input元素
:optional	选择未指定“required”属性的input元素
:required	选择指定了“required”属性的input元素
:valid	选择具有有效值的input元素

有关完整列表，请转到CSS 伪类。