srcmini本文概述
验证是根据要求检查前端用户提供的信息是否正确的过程。如果客户端提供的数据不正确或丢失, 则服务器将不得不将该数据发送回客户端, 并请求重新提交带有正确信息的表格。
通常, 验证过程在服务器端完成, 服务器端将该验证信息发送到前端用户。此过程浪费了执行时间和用户时间。
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="Submit">
</form>
<p id="d1"></p>
</center>
</body>
</html>输出如下
数据格式验证
在数据格式验证中, 将检查输入数据的正确值。它将验证已填充的输入字段是否已填充信息正确。
让我们通过以下示例了解数据格式验证的概念。
例子
<!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="Submit">
</form>
<p id="d1"></p>
</center>
</body>
</html>输出如下
评论前必须登录！
注册