JS-- form validation

1, form validation steps:

(1) determine the event (submit event), and create a function and the event binding.

(2) Writing data to the input function legality verification (need to set a user ID and to obtain the value of the input data by ID).

Legal information (3) input can be submitted normal; not legitimate, then the user can not submit information and prompt information.

2, verification function:

(1) a non-null check:

Obtaining values ID, to verify whether the air.

                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    Alert ( " User name can not be empty! " );
                     return  false ;
                }
                
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    Alert ( " password can not be empty! " );
                     return  false ;
                }

To form the corresponding set ID attribute, so as to obtain the form data by ID.

                            <tr>
                                <td>
                                    username
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    password
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password" />
                                </td>
                            </tr>

test:

(2) Confirm Password verification:

var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    Alert ( " twice inconsistent password! " );
                     return  false ;
                }

Test Results:

(3) check the mailbox format (regular expressions: https://www.cnblogs.com/zhai1997/p/11354683.html ):

                var eValue = document.getElementById("email").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    Alert ( " mailbox format is not correct! " );
                     return  false ;
                }

Test Results:

3, complete code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
            function checkForm(){
                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    Alert ( " User name can not be empty! " );
                     return  false ;
                }
                
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    Alert ( " password can not be empty! " );
                     return  false ;
                }
                
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    Alert ( " twice inconsistent password! " );
                     return  false ;
                }
                
                var eValue = document.getElementById("email").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    Alert ( " mailbox format is not correct! " );
                     return  false ;
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td height="600px" ">
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td>
                                    username
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    password
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    confirm password
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="email"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    Full name
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px" id="username"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    gender
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    date of birth
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px" id="birthday"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td colspan="2">
                                    <center>
                                    <input type="submit" value="注册" />
                                    </center>
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>                
            </tr>
        </table>
    </body>
</html>

JS-- form validation

Guess you like