详解JavaScript中的表单验证
更新时间：2015年06月16日 11:41:20 投稿：goldensun
这篇文章主要介绍了JavaScript中的表单验证,是JS在前端和服务器端通信部分相关的重要知识,需要的朋友可以参考下
表单验证用于发生在服务器，客户端已经输入所有必要的数据，然后按下提交按钮之后。如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失，则服务器将必须的所有数据发送回客户端，并请求的形式以正确的信息重新提交。这是一个漫长的过程，会增加服务器负担。
JavaScript中，提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据。表单验证通常执行两种方式。
- 基本验证 - 首先，该表必须进行检查，以确保数据输入的需要将其每一个表单字段。这将通过表格的每个字段只需要循环，并检查数据。
- 数据格式验证 - 其次，该被输入的数据必须检查正确格式和值。这将需要放置更多的逻辑来测试数据的正确性。
我们将举一个例子来了解验证的过程。下面是简单的形式进行：
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
<form action="/cgi-bin/test.cgi" name="myForm"
onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
基本表单验证：
首先，我们将展示如何做一个基本的表单验证。在上面的表格要求validate()函数来验证数据在onsubmit事件发生。以下是validate()函数的实现：
<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||
isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
//-->
</script>
数据格式验证：
现在，我们将看到我们如何将其提交到Web服务器之前，验证我们输入的表单数据。
这个例子说明了如何验证输入的电子邮件地址，这意味着电子邮件地址必须至少包含一个@符号和一个点（.）。此外，@绝不能是电子邮件地址的第一个字符，最后点必须在@符号后面的一个字符：
<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("Please enter correct email ID")
document.myForm.EMail.focus() ;
return false;
}
return( true );
}
//-->
</script>
相关文章
下面小编就为大家带来一篇学JavaScript七大注意事项【必看】。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
本文详细讲解了JavaScript预编译和执行过程，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家详细介绍了TypeScript中的函数和类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
上一篇文章，我们讲解了图像处理中的卷积操作和平滑（也就是模糊）处理，这篇文章我们进行亮度和对比度的变化,有需要的朋友可以参考下2013-01-01
这篇文章主要介绍了JS、DOM和JQuery之间的关系，对此概念不是特别清楚的朋友可以参考下2014-04-04
有些朋友在做div css js切换时,会碰到很多的问题，于是搜集整理了一下，拿出来和大家分享，希望可以帮助你们2012-12-12
这篇文章介绍了JWT构成及工作原理，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
常用jQuery的话我们知道，jQuery有非常强大的选择器来查找元素（也称作访问节点），例如：基本选择器、层次选择器、过滤选择器、属性选择器等2013-07-07
日常生活中，各种形式的时间字符到处都是。时间观念的产生，时间单位、计时工具的发明，给人类带来的变化实在一言难尽。今天就来谈谈日期那些事儿。一起来看看 JavaScript 中的日期对象 Date。2017-10-10
JavaScript脚本语言在网页中的简单应用...2007-05-05
最新评论