小白教程
所有教程
关于
Search
172.69.7.167
172.69.7.167
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JavaScript 表单”的源代码
本页内容
上一节:
JavaScript_使用误区
下一节:
JavaScript_表单验证
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:JavaScript 表单}}[[Category:Javascript 教程|31]] = JavaScript 表单 = == JavaScript 表单验证 == HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交: == JavaScript 实例 == <sample title="" desc="" lang="html" hererun="1"> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </sample> 以上 JavaScript 代码可以通过 HTML 代码来调用: == HTML 表单实例 == <sample title="" desc="" lang="html" hererun="1"> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html> </run> == JavaScript 验证输入的数字 == JavaScript 常用于对输入数字的验证: <sample title="" desc="" lang="html" hererun="1"> 10) { text = "输入错误"; } document.getElementById("demo").innerHTML = text; } ]]> 请输入 1 到 10 之间的数字: 提交 </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>JavaScript 验证输入</h1> <p>请输入 1 到 10 之间的数字:</p> <input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p> <script> function myFunction() { var x, text; // 获取 id="numb" 的值 x = document.getElementById("numb").value; // 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "输入错误"; } else { text = "输入正确"; } document.getElementById("demo").innerHTML = text; } </script> </body> </html> </run> == HTML 表单自动验证 == HTML 表单验证也可以通过浏览器来自动完成。 如果表单字段 (fname) 的值为空, '''required''' 属性会阻止表单提交: <sample title="" desc="" lang="html" hererun="1"> <form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form action="demo_form.php" method="post"> <input type="text" name="fname" required="required"> <input type="submit" value="提交"> </form> <p>点击提交按钮,如果输入框是空的,浏览器会提示错误信息。</p> </body> </html> </run> <blockquote>Internet Explorer 9 及更早 IE 浏览器不支持表单自动验证。 </blockquote> == 数据验证 == 数据验证用于确保用户输入的数据是有效的。 典型的数据验证有: * 必需字段是否有输入? * 用户是否输入了合法的数据? * 在数字字段是否输入了文本? 大多数情况下,数据验证用于确保用户正确输入数据。 数据验证可以使用不同方法来定义,并通过多种方式来调用。 '''服务端数据验证'''是在数据提交到服务器上后再验证。 '''客户端数据验证'''是在数据发送到服务器前,在浏览器上完成验证。 == HTML 约束验证 == HTML5 新增了 HTML 表单的验证方式:约束验证(constraint validation)。 约束验证是表单被提交时浏览器用来实现验证的一种算法。 HTML 约束验证基于: * '''HTML 输入属性''' * '''CSS 伪类选择器''' * '''DOM 属性和方法''' === 约束验证 HTML 输入属性 === {| class="table table-striped table-hover" ! 属性 ! 描述 |- | disabled | 规定输入的元素不可用 |- | max | 规定输入元素的最大值 |- | min | 规定输入元素的最小值 |- | pattern | 规定输入元素值的模式 |- | required | 规定输入元素字段是必需的 |- | type | 规定输入元素的类型 |} 完整列表,请查看 [[html5 form attributes|HTML 输入属性]]。 === 约束验证 CSS 伪类选择器 === {| class="table table-striped table-hover" ! 选择器 ! 描述 |- | :disabled | 选取属性为 "disabled" 属性的 input 元素 |- | :invalid | 选取无效的 input 元素 |- | :optional | 选择没有"optional"属性的 input 元素 |- | :required | 选择有"required"属性的 input 元素 |- | :valid | 选取有效值的 input 元素 |} 完整列表,请查看 [[css pseudo classes|CSS 伪类]]。
返回至“
JavaScript 表单
”。
上一节:
JavaScript_使用误区
下一节:
JavaScript_表单验证