ES6 验证

2025年3月17日 | 阅读 3 分钟

验证是检查前端用户提供的信息是否符合要求的过程。如果客户端提供的数据不正确或缺失，则服务器必须将该数据发送回客户端，并要求重新提交具有正确信息的表单。

通常，验证过程在服务器端完成，服务器将验证信息发送给前端用户。此过程浪费了执行时间和用户时间。

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>

立即测试

下一主题ES6 动画

ES6 验证

基本表单验证

数据格式验证

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ES6 教程

ES6 函数

ES6 数组

ES6 对象

ES6 类

ES6 字符串

高级特性

ES6 其他

面试题

ES6 验证

基本表单验证

数据格式验证

相关帖子

ES6 void 关键字

ES6 事件

ES6 页面重定向

ES6 Cookie

ES6 数字

ES6 模块

ES6 动画

ES6 布尔值

ES6 对话框

ES6 Promise

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器