JavaScript 学习笔记 17 - 表单

教材来自<<菜鸟学堂>>

表单验证

以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

function validateForm(){
      var x=document.forms["myForm"]["email"].value;
      var atpos=x.indexOf("@");
      var dotpos=x.lastIndexOf(".");
      if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
            alert("不是一个有效的 e-mail 地址");
            return false;
      }
}

表单验证+提交

以上 JavaScript 代码可以通过 HTML 代码来调用：

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
<form name="myForm" action="demo_form.php"onsubmit="return validateForm()" method="post">
		名字: <input type="text" name="fname">
		<input type="submit" value="提交">
</form>

验证输入的数字

function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    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 表单验证也可以通过浏览器来自动完成。

<form action="demo_form.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="提交">
</form>

Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。