肉渣教程

JS 表单

上一节 下一节

<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结果,则表单不会被提交。知道这一点即可,剩下的活学活用就好啦。


JS 表单

上一节 下一节