JavaScript验证表单数据，HTML自动验证表单数据是否为空，数字范围

程序员文章站 2022-07-15 17:31:06

...

典型数据验证：
a.字段是否为空；
b.输入内容是否合法(例如数字字段是否输入了文本，email格式是否正确等)
数据验证时可通过javaScript进行表单验证，也可提交表单，在服务器端验证。通常情况下，更多的使用表单验证，效率更高。

onsubmit表单验证

<html>
<head>
<meta charset="utf-8">
<title>javaScript表单验证</title>
<script>
function validateForm() {
	//获取表单元素的值
    var x = document.forms["myForm"]["fname"].value;
    //验证是否为空
    if (x == null || x == "") {
        alert("名字不能为空!");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="#"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>
</html>

- HTML表单自动验证

<html>
<head>
<meta charset="utf-8">
<title>表单自动验证是否为空</title>
</head>
<body>
<!--Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。-->
<!--验证字段是否为空-->
<form action="#" method="post">
  <input type="text" name="fname" required="required">
  <input type="submit" value="提交">
</form>

<p>点击提交按钮，如果输入框是空的，浏览器会提示：“请填写此字段”。</p>

</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单自动验证数字</title>
</head>
<body>
	<!--验证数字是否在0-3之间，type需要设置为number类型-->
    <form action="#" method="post">
            <input type="number" name="text" required min="0" max="3">
            <input type="submit" value="提交">
    </form>
</body>
</html>

上一篇： Python多重继承

下一篇： ubuntu apt-get使用国内源