JS——表单校验

Posted Dream

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS——表单校验相关的知识,希望对你有一定的参考价值。

1、表单校验步骤

(1)确定事件(submit事件),创建一个函数并和该事件绑定。

(2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值)。

(3)输入的信息合法,可以正常提交;不合法的话,不能提交用户信息并给出提示信息。

2、校验函数

(1)非空校验:

通过ID获取值,对是否为空进行校验。

                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    alert("用户名不能为空!");
                    return false;
                }
                
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空!");
                    return false;
                }

相应的表单中要设置ID属性,以便通过ID获取表单中的数据。

                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password" />
                                </td>
                            </tr>

测试:

 (2)确认密码校验:

var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }

测试结果:

 (3)邮箱格式校验(正则表达式: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("邮箱格式不正确!");
                    return false;
                }

测试结果:

  3、完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
            function checkForm(){
                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    alert("用户名不能为空!");
                    return false;
                }
                
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                    alert("密码不能为空!");
                    return false;
                }
                
                var rpValue = document.getElementById("repassword").value;
                if(rpValue!=pValue){
                    alert("两次密码输入不一致!");
                    return false;
                }
                
                var eValue = document.getElementById("email").value;
                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("邮箱格式不正确!");
                    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>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    确认密码
                                </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>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px" id="username"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value=""/><input type="radio" name="sex" value=""/></td>
                            </tr>
                            
                            <tr>
                                <td>
                                    出生日期
                                </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>

4、改进

以上方法只有在提交的时候才能发现数据的错误,对于用户来说很不方便,以下的改进代码可以增加页面的用户友好性:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
            function showTips(id,info){
                document.getElementById(id+"span").innerHTML="<font color=\'gray\'>"+info+"</font>";
            }
            
            function check(id,info){
                var uValue = document.getElementById(id).value;
                if(uValue==""){
                    document.getElementById(id+"span").innerHTML="<font color=\'red\'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </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>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user" 
                                        onfocus="showTips(\'user\',\'用户名必填!\')" 
                                        onblur="check(\'user\',\'用户名不能为空!\')"/>
                                        <span id="userspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"  
                                        onfocus="showTips(\'password\',\'密码必填\')"
                                        onblur="check(\'password\',\'密码不能为空!\')"/>
                                        <span id="passwordspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    确认密码
                                </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>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px" id="username"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value=""/><input type="radio" name="sex" value=""/></td>
                            </tr>
                            
                            <tr>
                                <td>
                                    出生日期
                                </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——表单校验的主要内容,如果未能解决你的问题,请参考以下文章

vue.js表单校验详解

vue.js基础知识篇:表单校验详解

js校验表单后提交表单的三种方法总结(转)

js表单验证

低代码中的表单校验工具joi使用方法

JS——表单校验