下一节:

  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 伪类。
下一节: