ES6 验证

ES6 Validations

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

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

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 版本