JavaScript 表单验证
时间：2019-08-20 13:50:45 来源:igfitidea点击:
表单验证通常发生在服务器上，当客户端输入了所有必要的数据后，然后按下提交按钮。
如果客户端输入的数据不正确或者不全，服务器将不得不将所有数据发送回客户端，并请求用正确的信息重新提交表单。
这是一个漫长的过程，给服务器增加了很多负担。
JavaScript提供了在将表单数据发送到web服务器之前在客户端计算机上验证表单数据的方法。
表单验证通常执行两个功能：
基本验证——首先，必须检查表单，确保所有必需字段都已填写。它只需要循环遍历表单中的每个字段并检查数据。
数据格式验证——其次，必须检查输入的数据是否具有正确的形式和值。 代码必须包含适当的逻辑来测试数据的正确性。
JavaScript 表单验证例子
下面是一个html格式的简单表单。
<html>
<head>
<title>Form Validation</title>
<script type = "text/javascript">
// 这里写上表单验证的代码
</script>
</head>
<body>
<form action = "" name = "myForm" onsubmit = "return(validate());">
用户名：<input type = "text" name = "name" />
邮箱：<input type = "text" name = "email" />
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
基本表单验证
让我们看看如何进行基本的表单验证。当onsubmit事件发生时，我们调用validate()来验证数据。
返回true表示通过验证，数据将会被提交到服务端。
<script type = "text/javascript">
function validate() {
if( document.myForm.name.value == "" ) {
alert( "请输入用户名!" );
document.myForm.name.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
alert( "请输入邮箱地址!" );
document.myForm.email.focus() ;
return false;
}
return true;
}
</script>
数据格式验证
下面验证输入的电子邮件地址。
邮箱地址需要包含一个“@”和一个点“."。
并且@不能是电子邮件地址的第一个字符，点后面至少要有一个字符。
<script type = "text/javascript">
function validateemail() {
var emailID = document.myForm.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("请输入正确的邮箱地址。")
document.myForm.email.focus() ;
return false;
}
return( true );
}
</script>
整合在一起：
<script type = "text/javascript">
function validateemail() {
var emailID = document.myForm.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
alert("请输入正确的邮箱地址。")
document.myForm.email.focus() ;
return false;
}
return( true );
}
function validate() {
if( document.myForm.name.value == "" ) {
alert( "请输入用户名!" );
document.myForm.name.focus() ;
return false;
}
if( document.myForm.email.value == "" ) {
alert( "请输入邮箱地址!" );
document.myForm.email.focus() ;
return false;
}
if(!validateemail()){
return false;
}
return true;
}
</script>
