表单验证(8/30)
2017-08-31 本文已影响0人
BaibaiWang
HTML表单
表单是用于从用户收集输入的HTML机制。
要创建基本表单，您需要三个元素: form，input 和 button 元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<input name="name" />
<button>Submit Vote</button>
</form>
</body>
</html>
method属性指定将使用哪个HTTP方法将表单数据发送到服务器。
允许的值为 get 和 post ，它们对应于HTTP GET和POST方法。
method属性的默认值为 get 。
以下代码设置表单的 post 值:
<form method="post" action="http://example.com/form">
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
表单数据经常需要使用 JavaScript 来验证其正确性：
验证表单数据是否为空？
验证输入是否是一个正确的email地址？
验证日期是否输入正确？
验证表单输入内容是否为数字型？
- 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("姓必须填写");
return false;
}
}
以上函数在 form 表单提交时被调用:
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
onsubmit 会在表单中的确认按钮被点击时发生。
语法:
onsubmit="SomeJavaScriptCode"
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
<!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>
- 下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
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;
}
}
以上函数在 form 表单提交时被调用:
<form name="myForm" action="demo-form.php"
onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
