DOM编程-表单验证

heliuerya

已于 2023-02-10 14:34:37 修改

阅读量350

点赞数

分类专栏： JavaScript 学习笔记文章标签： javascript 前端 html5 css 正则表达式

于 2023-02-09 09:19:52 首次发布

本文链接：https://blog.csdn.net/heliuerya/article/details/128946601

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

JavaScript

39 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单验证</title>
       <style type="text/css">
           /* 为span标签设置样式 */
           span{
               color: red;           /* 字体红色 */
               font-size: 12px;   /* 字号12px */
           }
           div{
               position: absolute; /* div绝对定位与下面2行代码共同起作用 */
               top: 10px; /* 距离页面顶部10px */
               left: 40%; /* 距离页面左侧40% */
           }
       </style>
   </head>
   <body>
       <script type="text/javascript">
           /*
               1、用户名不能为空
               2、用户名必须在6-14位之间
               3、用户名只能由数字和字母组成，不能含有其他符合。（正则表达式）
               4、密码和确认密码一致，邮箱地址合法
               5、统一失去焦点验证
               6、错误提示信息统一在span标签中提示，并且要求字体红色，字号12号
               7、文本框再次获得焦点后清空错误提示信息，如果文本框中的数据不合法要求清空文本框的value
               8、最终表单中所有项均合法方可提交
           */
           /*
               1、后期可以继续完善，比如密码不能为空，密码强度分为弱、中、强等等。

2、注意代码编写过程中变量的声明位置

*/
           // 页面加载完成之后执行
           window.onload =function(){
               // 获取用户名对象
               var usernameEmt = document.getElementById("username");
               // 获取用户名错误信息提示对象
               var span1Emt = document.getElementById("span1");


               // 绑定用户名失去焦点事件blur
               usernameEmt.onblur = function(){
                   // 获取用户名文本框中的value
                   var username = usernameEmt.value
                   // 去除用户名前后空白
                   username = username.trim();
                   // 创建用户名文本框的正则表达式对象(这里面已经包含了不为空和长度要求)
                   var usernameRegEpx = /^[A-Za-z0-9]{6,14}$/;
                   // 调用正则表达式的test()方法验证输入的用户名是否合法
                   var usernameOk = usernameRegEpx.test(username);
                   if(usernameOk){
                       span1Emt.innerHTML = ""
                   }else{
                       span1Emt.innerHTML = "用户名不合法"
                   }
               }
               // 用户名文本框绑定获得焦点事件
               usernameEmt.onfocus = function(){
                   // 清空非法的value
                   // 如果用户名后面的错误提示信息不为空(有内容)就是非法的value，就需要清空用户名
                   if(span1Emt.innerHTML != ""){
                       usernameEmt.value = ""
                   }
                   // 清空提示信息（注意这行代码不能写到"清空非法的value"的前面）
                   span1Emt.innerText = "";
               }

               // 获取确认密码错误提示标签对象
               var span3Emt = document.getElementById("span3");
               // 获取确认密码框对象
               var pwd2Emt = document.getElementById("password2");
               // 获取密码框对象
               var pwd1Emt = document.getElementById("password1");
               // 绑定确认密码失去焦点事件
               pwd2Emt.onblur = function(){
                   // 获取确认密码和密码
                   var pwd2 = pwd2Emt.value;
                   var pwd1 = pwd1Emt.value;
                   if(pwd2 != pwd1){
                       // 在span3处提示错误信息
                       span3Emt.innerHTML = "密码信息不一致"
                   }
               }
               // 绑定确认密码获得焦点事件focus
               pwd2Emt.onfocus = function(){
                   // 如果确认密码的提示信息不等于空
                   if(span3Emt.innerHTML != ""){
                       // 清空错误的确认密码信息
                       pwd2Emt.value = "";
                   }
                   // 清空确认密码的错误提示信息
                   span3Emt.innerHTML = "";
               }

               // 获取邮箱地址框对象
               var emailEmt = document.getElementById("email");
               // 获取邮箱地址错误信息提示标签对象
               var span4Emt = document.getElementById("span4");
               // 绑定邮箱地址失去焦点事件blur
               emailEmt.onblur = function(){
                   // 获取邮箱地址字符串
                   var email = emailEmt.value;
                   // 创建邮箱地址正则表达式对象
                   var emailRegEpx = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                   // 调用正则表达式对象的test()方法
                   var emailOk = emailRegEpx.test(email);
                   if(emailOk){
                       span4Emt.innerHTML = "";
                   }else{
                       // 在邮箱地址错误提示信息处发出错误提示信息
                       span4Emt.innerHTML = "邮箱地址不合法";
                   }
               }
               // 绑定邮箱地址获得焦点事件focus
               emailEmt.onfocus = function(){
                   // 如果邮箱地址提示信息不为空
                   // 下行代码.innerHTML和.innerText都可以，但是不可以.value
                   if(span4Emt.innerText != ""){
                       // 清空邮箱地址
                       emailEmt.value = "";
                   }
                   // 清空邮箱地址错误提示信息
                   span4Emt.innerHTML = "";
               }

               // 给提交按钮绑定鼠标单击事件click
               document.getElementById("btn").onclick = function(){
                   // 需要触发用户名和密码确认以及邮箱地址的blur事件
                   // 不需要人工手动操作，使用代码触发。先focus、再blur。
                   usernameEmt.focus();//用户名对象获得焦点事件
                   usernameEmt.blur();//用户名对象失去焦点事件

                   pwd2Emt.focus();//确认密码对象获得焦点事件
                   pwd2Emt.blur();//确认密码对象失去焦点事件

                   emailEmt.focus();//邮箱地址对象获得焦点事件
                   emailEmt.blur();//邮箱地址失去焦点事件

                   // 当所有表单项都合法的时候，提交表单
                   if(span1Emt.innerHTML == "" && span3Emt.innerHTML == "" && span4Emt.innerHTML == ""){
                       // 提交表单
                       document.getElementById("form").submit();
                   }
               }
           }
       </script>
       <div>
       
           <form action="http://localhost:8080/jd/save" method="get" id="form">
               <table>
                   <tr>
                       <td>用  户  名</td>
                       <td><input type="text" name="username" id="username"/></td>
                       <td><span id="span1"></span></td>
                   </tr>
                   <tr>
                       <td>密       码</td>
                       <td><input type="text" name="password" id="password1"/></td>
                       <td><span id="span2"></span></td>
                   </tr>
                   <tr>
                       <td>确认密码</td>
                       <td><input type="text" id="password2"/></td>
                       <td><span id="span3"></span></center></td>
                   </tr>
                   <tr>
                       <td>邮箱地址</td>
                       <td><input type="text" name="email" id="email"/></td>
                       <td><span id="span4"></span></td>
                   </tr>
                   <tr>
                       <td><input type="reset" value="重置"/></td>
                       <td><input type="button" value="注册" id="btn"/></td>
                       <td></td>
                   </tr>
               </table>
           </form>
       </div>
   </body>
</html>