详解JavaScript中的表单验证

JavaScript 2018-12-31

表单验证用于发生在服务器，客户端已经输入所有必要的数据，然后按下提交按钮之后。如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失，则服务器将必须的所有数据发送回客户端，并请求的形式以正确的信息重新提交。这是一个漫长的过程，会增加服务器负担。

JavaScript中，提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据。表单验证通常执行两种方式。

基本验证 - 首先，该表必须进行检查，以确保数据输入的需要将其每一个表单字段。这将通过表格的每个字段只需要循环，并检查数据。
数据格式验证 - 其次，该被输入的数据必须检查正确格式和值。这将需要放置更多的逻辑来测试数据的正确性。

我们将举一个例子来了解验证的过程。下面是简单的形式进行：

Form Validation

基本表单验证：

首先，我们将展示如何做一个基本的表单验证。在上面的表格要求validate()函数来验证数据在onsubmit事件发生。以下是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 );
}
//-->

数据格式验证：

现在，我们将看到我们如何将其提交到Web服务器之前，验证我们输入的表单数据。

这个例子说明了如何验证输入的电子邮件地址，这意味着电子邮件地址必须至少包含一个@符号和一个点（.）。此外，@绝不能是电子邮件地址的第一个字符，最后点必须在@符号后面的一个字符：

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 );
}
//-->

JavaScript 表单表单

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支持第三个参数...

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其他强类型语言...

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提交） 2.资源...

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是须知的必须有...

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图，：视图模...

js实现横向跑马灯效果

首先我们需要一个html代码的框架如下：我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...

详解JavaScript中的表单验证

基本表单验证：

数据格式验证：

相关文章