本文概述
- 基本表格验证
- 数据格式验证
通常, 验证过程在服务器端完成, 服务器端将该验证信息发送到前端用户。此过程浪费了执行时间和用户时间。
JavaScript为我们提供了一种在将表单数据发送到服务器端之前对其进行验证的方法。表单中的验证通常执行以下两个功能:
- 基本验证-确保所有必填字段都已填写或未填写的过程。
- 数据格式验证-顾名思义, 这是检查输入数据是否正确的过程。我们必须包括适当的逻辑来测试数据的正确性。
基本表格验证它会验证表单的必填输入字段, 无论是否填写了必填字段。
让我们通过使用以下示例来了解基本表单验证的过程。
例子
<
!DOCTYPE html>
<
html>
<
head>
<
title>
Example of Basic form Validation<
/title>
<
script>
function validateBasic() { var name1 = document.basic.name.value;
var qual1 = document.basic.qual.value;
var phone1 = document.basic.phone.value;
if (name1 == "") { alert("Name required");
return false;
} if (qual1 == "") { alert("Qualification required");
return false;
} if (phone1 == "") { alert("Mobile number is required");
return false;
} } <
/script>
<
/head>
<
body>
<
center>
<
h1>
Basic Form Validation<
/h1>
<
form name="basic" action="#" onsubmit="return validateBasic()">
<
table cellspacing = "2" cellpadding = "2" border = "1">
<
tr>
<
td>
Name: <
/td>
<
td>
<
input type="text" name="name">
<
/td>
<
tr>
<
tr>
<
td>
Qualification: <
/td>
<
td>
<
input type="text" name="qual">
<
/td>
<
/tr>
<
tr>
<
td>
Phone no.:<
/td>
<
td>
<
input type="text" name="phone">
<
/td>
<
/tr>
<
/table>
<
input type="submit" value="http://www.srcmini.com/Submit">
<
/form>
<
p id="d1">
<
/p>
<
/center>
<
/body>
<
/html>
【ES6验证介绍和用法示例】输出如下
数据格式验证在数据格式验证中, 将检查输入数据的正确值。它将验证已填充的输入字段是否已填充信息正确。
让我们通过以下示例了解数据格式验证的概念。
例子
<
!DOCTYPE html>
<
html>
<
head>
<
title>
Example of Basic form Validation<
/title>
<
script>
function validateBasic() { var name1 = document.basic.name.value;
var qual1 = document.basic.qual.value;
var phone1 = document.basic.phone.value;
var id = document.basic.em.value;
if (name1 == "") { alert("Name required");
return false;
} if(name1.length<
5){alert("Username should be atleast 5 characters");
return false;
}at = id.indexOf("@");
dot = id.lastIndexOf(".");
if (at <
1 || ( dot - at <
2 )) {alert("Incorrect Email-ID")return false;
}if (qual1 == "") { alert("Qualification required");
return false;
} if (phone1 == "") { alert("Mobile number is required");
return false;
} if(phone1.length<
10 || phone1.length>
10){alert("Mobile number should be of 10 digits");
return false;
} } <
/script>
<
/head>
<
body>
<
center>
<
h1>
Basic Form Validation<
/h1>
<
form name="basic" action="#" onsubmit="return validateBasic()">
<
table cellspacing = "2" cellpadding = "2" border = "1">
<
tr>
<
td>
Name: <
/td>
<
td>
<
input type="text" name="name">
<
/td>
<
/tr>
<
tr>
<
td>
Email: <
/td>
<
td>
<
input type="email" name="em">
<
/td>
<
/tr>
<
tr>
<
td>
Qualification: <
/td>
<
td>
<
input type="text" name="qual">
<
/td>
<
/tr>
<
tr>
<
td>
Phone no.:<
/td>
<
td>
<
input type="number" name="phone">
<
/td>
<
/tr>
<
/table>
<
input type="submit" value="http://www.srcmini.com/Submit">
<
/form>
<
p id="d1">
<
/p>
<
/center>
<
/body>
<
/html>
输出如下
推荐阅读
- ES6变量介绍和用法示例
- ES6模板字面量介绍和用法
- ES6字符串用法示例
- ES6散布运算符解释和用法
- ES6 set介绍和用法详解
- ES6 rest参数用法解释
- ES6 Promise介绍和用法示例
- ES6页面重定向
- ES6页面打印