js编程,dom编程,常见事件

最新推荐文章于 2024-10-01 20:12:28 发布

wwb186411_

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量167

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/wwb186411_/article/details/124719525

版权

HTML CSS JavaScript 表单验证用户体验

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
          #ap{
              height: 100%;
              width: 100%;
              position: relative;
          }
          #left{

              position: absolute;
              left: 35%;
              margin-top: 60px;
          }
          #center{
              position: absolute;
              width: 600px;
              height: 100%;
              left: 50%;
              margin-left: -200px;
              text-align: center;
              margin-top: 50px;
              background-color: aqua;
          }
          .text_left{
              display: inline-block;
              height:30px ;
              margin-top:15px ;
          }
          .text{
              margin-top: 15px;
              width: 400px;
              height: 30px;
          }
          .text1{
              margin-top: 20px;
              width: 120px;
              height: 30px;
          }
          .span_text{
              position: absolute;
              right: 0;
              background-color: aquamarine;
              margin-top:15px ;
          }
       </style>
   </head>
   <body id="ap">
       <div id="center">
           <form action="d2.html" method="get" οnsubmit="return all()">
           <input type="text" id="name" placeholder="请输入用户名" οnblur="checkgetName()" class="text"/><span id="spanname" class="span_text"></span><br />
           <input type="password" id="password" placeholder="请输入密码" οnblur="checkgetPassWork()" class="text"/><span id="span2" class="span_text"></span><br />
           <input type="password" id="password1" placeholder="请确认密码" οnblur="checkPass()" class="text"/><span id="span3" class="span_text"></span><br />
           <input type="password" id="email" placeholder="请输入邮箱" οnblur="checkgetEmail()" class="text"/><span id="spanemail" class="span_text"></span><br/>
           <input type="submit" value="注册" class="text1"/>
           </form>
       </div>
       <div id="left">
           <font class="text_left">用户名</font><br />
           <font class="text_left">密码</font><br />
           <font class="text_left">确认密码</font><br />
           <font class="text_left">邮箱</font><br />
       </div>
   </body>
   <script>
       function checkgetName(){
           var name1=document.getElementById("name").value
           var span=document.getElementById("spanname")
           var gra=/^[a-zA-Z0-9]{4,12}$/;
           if(gra.test(name1)){
               span.innerHTML="√".fontcolor("#0000ff")
               return true
           }else{
               span.innerHTML="格式有误".fontcolor("red")
               return false
           }
       }
       function checkgetPassWork(){
           var passwork=document.getElementById("password").value
           var span2=document.getElementById("span2")
           var gra=/^[a-zA-Z0-9]{6,10}$/
           if(gra.test(passwork)){
               span2.innerHTML="√".fontcolor("#ff00ff")
               return true
           }else{
               span2.innerHTML="格式有误".fontcolor("red")
               return false
           }
       }
       function checkPass(){
           var passwork3=document.getElementById("password1").value
           var passwork2=document.getElementById("password").value
           var span3=document.getElementById("span3")
           if(passwork3==passwork2){
               span3.innerHTML="√".fontcolor("#00fff0")
               return true
           }else{
               span3.innerHTML="密码不一致".fontcolor("red")
               return false
           }
       }
       function checkgetEmail(){
           var email=document.getElementById("email").value
           var span4=document.getElementById("spanemail")
           var gre=/^[a-z0-9A-Z]+@[a-z0-9A-Z]+(\.[a-z]{2,3}){1,2}$/
           if(gre.test(email)){
               span4.innerHTML="√".fontcolor("#00ffff")
               return true
           }else{
               span4.innerHTML="格式有误".fontcolor("red")
               return false
           }
       }
       function all(){
           if ( checkgetEmail()&&checkPass()&&checkgetPassWork()&&checkgetName() ) {
               return true
           }else {
               return false
           }
       }
   </script>
</html>

js中常见事件;1单击事件click(绑定事件onclick) 2,双击事件dblclick(ickj) 3,获取焦点事件foocus) 4已移除焦点事件blur(onblur)选项卡发生改变事件change(onchange)

dom是什么;Document Object Model j基于文档对象模型编程

获取事件的的方法,1document.getElementByID("ID属性值") 2document.getElementsclass("class属性值")3 document.getElementsTapName("标签名") 4document.getElementsName("name属性值")

js中自定义对象的方法四种

1,有形参 function 对象名(属性名1,属性名2){

this.属性名1=属性名1;

this 属性名2=属性名2;

this.函数名=function (){

return 值

}

var 值=new 对象名(实参1,实参2)

2,function 对象名(){};追加属性方法(无形参)

var 对象名 =new 对象名();

对象名.属性名="属性值"

对象名. 方法名=function (){