JavaScript-DOM-表单验证练习重点

最新推荐文章于 2024-07-29 11:53:27 发布

我叫JIN

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量86

点赞数

文章标签： javascript 正则表达式 css

本文链接：https://blog.csdn.net/Jft123456/article/details/119998347

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>表单验证</title>
       <style type="text/css">
           span{
               font-size: 12px;
               color: red;
           }
       </style>
   </head>
   <body>
       <script type="text/javascript">
           /*
           （1）用户名不能为空
           （2）用户名必须在6-14位之间
           （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
           （4）密码和确认密码一致
           （5）统一失去焦点验证
           （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
           （7）文本框再次获得焦点后，清空错误提示信息
           （8）最终表单中所有项均合法方可提交
           */
               window.οnlοad=function(){
                   var utext=document.getElementById("use");
                   var pwd=document.getElementById("pwd");
                   var uspan=document.getElementById("uspan");
                   utext.οnblur=function(){
                       var use=utext.value.trim();//获取用户名并且去除前后空格
                       if(use ==""){
                           uspan.innerHTML="用户名不能为空";
                       }else{
                           if(use.length<6 || use.length>14){
                               uspan.innerHTML="用户名的长度必须在[6-14]位之间"
                           }else{
                               //正则表达式用户名只能有数字和字母组成，不能含有其它符号
                               var regExp=/^[0-9a-zA-Z]+$/;
                               if(!regExp.test(use)){
                                   uspan.innerHTML="用户名只能由数字和字母组成，不能含有其他符号";
                               }
                           }

                       }
                   }
                   utext.οnfοcus=function(){
                       uspan.innerHTML="";
                   }

                   var pwd=document.getElementById("pwd");//密码框
                   var checkpwd=document.getElementById("checkpwd");//确认密码框
                   var pwdspan=document.getElementById("pwdspan");
                   var pwdcheckspan=document.getElementById("pwdcheckspan");
                   pwd.οnblur=function(){
                       // 密码不能为空
                       if(pwd.value==""){
                           pwdspan.innerHTML="密码不能为空";
                       }
                   }
                   pwd.οnfοcus=function(){
                       pwdspan.innerHTML="";
                   }

                   checkpwd.οnblur=function(){
                       if(checkpwd.value==""){
                           pwdcheckspan.innerHTML="确认密码不能为空";
                       }else{
                           if(checkpwd.value!=pwd.value){
                               pwdcheckspan.innerHTML="密码不一致";
                           }
                       }
                   }
                   checkpwd.οnfοcus=function(){
                       pwdcheckspan.innerHTML="";
                   }
                   //注册
                   document.getElementById("b1").οnclick=function(){

                       // 获取各个事件
                       //用户名的文本框,先获取焦点,再失去焦点
                       //JS代码来触发事件,而不是认为去触发
                       utext.focus();
                       utext.blur();
                       //密码的确认和失去焦点
                       pwd.focus();
                       pwd.blur();
                       //确认密码的确认和失去焦点
                       checkpwd.focus();
                       checkpwd.blur();

                       //接下来看所有的文本框是否都是空,空的表示表单合法
                       if(uspan.innerHTML==""&& pwdspan.innerHTML==""&& pwdcheckspan.innerHTML==""){
                           // 开始提交表单
                           // 获取表单对象
                           console.log("ok")
                           var formsubmit=document.getElementById("form")
                           formsubmit.submit();
                       }

                   }
               }
           </script>
       <form action="http://localhost:8080/ss/ss" id="form" >
           用户名<input type="text"id="use" name="usename"/><span id="uspan">   </span>
           <br>
           密码<input type="password" id="pwd" name="pwd"/><span id="pwdspan"></span>
           <br>
           确认密码<input type="password" id="checkpwd" /><span id="pwdcheckspan"></span>
           <br>
           <input type="button" id="b1" value="注册" />
       </form>
   </body>
</html>

我叫JIN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM-表单验证练习重点

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单验证</title> <style type="text/css"> span{ font-size: 12px; color: red; ...
复制链接

扫一扫