Javascript如何实现表单检验

2023-07-02 10:35

短信预约 -IT技能 免费直播动态提醒

本文小编为大家详细介绍“Javascript如何实现表单检验”，内容详细，步骤清晰，细节处理妥当，希望这篇“Javascript如何实现表单检验”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

要求：

用户名不为空，且用户名不能超过12个字符；
2.密码不为空，且密码不能超过15个字符；
3.密码和重复输入的密码必须一致；
4.如果发生错误，显示错误并聚焦到错误位置；

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>注册</title>        <script>            function $(id){                return document.getElementById(id);            }            function test(){                var user_name = $("user_name").value;                var password = $("password").value;                var re_password = $("re_password").value;                if(user_name.length==0){                    $("msg").innerHTML = "用户名不能为空！";                    $("user_name").focus();                    return false;                }                if(user_name.length>12){                    $("msg").innerHTML = "用户名不能超过12个字符！";                    $("user_name").focus();                    return false;                }                if(password.length==0){                    $("msg").innerHTML = "密码不能为空！";                    $("password").focus();                    return false;                }                if(password.length>15){                    $("msg").innerHTML = "密码不能超过15个字符！";                    $("password").focus();                    return false;                }                if(password!=re_password ){                    $("msg").innerHTML="错误！密码不一致！";                    $("re_password").focus();                    return false;                }                console.log("注册成功！");                return true;            }        </script>    </head>    <body>        <br />        <span id="msg" ></span>        <form onsubmit="return test()">            <input placeholder="请输入用户名" id="user_name" /><br />            <input placeholder="请输入密码" type="password" id="password"/><br />            <input placeholder="请再次输入密码" type="password" id="re_password"/><br />            <input type="submit"  value="注册" />        </form>    </body></html>

注：方法不唯一，此方法仅作参考。

下面对该代码中的一些点进行讲解：

（id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原（id）的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串，极大程度的简化代码，你也可以不使用该方法，用document.getElementById()还原()；
2. 定义的对象必须加.value使其为获取的输入的值，而下面聚焦时，需要改用focus；
3. 在每个if语句中，最好再加一个返回值，提高代码的运行效果，innerHTML的作用是在浏览器页面中显示；
4. 在整个函数test()的最后，若return false，则为取消提交，若return true，则为正常提交；

大家可以自己尝试一下，部分页面如下：
直接运行代码如图：

Javascript如何实现表单检验