<form ... onsubmit="return 自定义的表单验证函数()">

当表单被提交前，自定义的表单函数则会被调用执行，若该函数返回false，则表单不会被提交；若返回true或转为布尔型等价于true的结果，则表单会被顺利提交。

使用JavaScript 进行表单验证

JavaScript可以进行表单验证，比如在提交前验证输入框是否为空。

function validate_form() {
  var gang = document.forms["tou_ming"]["gang"].value;
  if (gang == "") {
    alert("你可以无名，但是必须填写门派名称！");
    return false;
  }
}

上述函数在表单提交前会被执行，若返回false表单则不会被提交。

<form action="/action_page" name="tou_ming" onsubmit="return validate_form()" method="post">
  姓名:<br>
  <input type="text" name="name" autocomplete="off"><br>
  门派:<br>
  <input type="text" name="gang" autocomplete="off"><br><br>
  <input type="submit">
</form>

运行一下

---

当然，也可以用H5的一些新特性，来更快捷地实现上述验证功能，比如可以在需要验证是否为空的input元素上添加required属性即可，<input type="text" name="gang" required>（运行一下）

---

JavaScript 验证数字输入

JavaScript还可以用来验证用户是否输入了合法的数字。例如，如下所示，只接受提交1到10的数字。

// 验证输入的是否是1-10的数字
function validate_form() {
  var x = document.forms["example"]["num"].value;

  // 如果x不是数字或小于1或大于10则不合法
  if (isNaN(x) || x < 1 || x > 10) {
    alert("非法输入，别扰了圣听，速速修改，只接受1-10的数字");
    return false;
  }
}

运行一下

---

通过form元素的onsubmit属性引入JavaScript验证函数，若收到false结果，则表单不会被提交。知道这一点即可，剩下的活学活用就好啦。