JS实现登陆界面

2021-09-03 10:37:52
935次极悦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 100px;
            height: 20px;
            /* float: left; */
        }
        div{
            width: 100px;
            height: 20px;
            background-color: blueviolet;
            /* float: left; */
            display: none;
        }
    </style>     
</head>
<body>
    <form id="myform">
    登陆：<input type="text" id="t1" value="">
    <br>
    密码：<input type="password" id="t2" value="">
    <br>
    确认密码：<input type="password" id="t3" value="">
    <br>    
    电子邮件：<input type="text" id="t4" value="">
    <br>
    <input type="submit" value="登陆">
</form> 
 <script>
     window.onload=function (){
         var formObj=document.getElementById("myform");
         formObj.onsubmit=checkAll;
     }
     function checkAll(){
         if(userName()&&checkPass()&&checkRpass()&&checkEmail()){
            document.write("<h2>恭喜你</h2>");
             document.write("<h2>登陆成功</h2>");
         }      
     }
     function userName(){
         var strName=document.getElementById("t1").value;
         if(strName.length==0){
             alert("用户名不能为空");
             return false;
         }
         if(strName.length<4||strName.length>16){
             alert("用户名的长度应在4~16之间");
             return false;
         }
        return true;
     }
     function checkPass(){
         var pass=document.getElementById("t2").value;
         if(pass.length==0){
             alert("密码不能为空");
             return false;
         }
         if(pass.length<6||pass.length>32){
             alert("为了保证您的安全，密码长度为6位以上32位以下");
             return false;
         }
         return true;
     }
     function checkRpass(){
         var rpass=document.getElementById("t3").value;
         var pass=document.getElementById("t2").value;
         if(rpass!=pass){
             alert("密码与原密码不一致");
             return false;
         }
         return true;
     }
   function checkEmail(){
       var  email=document.getElementById("t4").value;
       if(email.length==0){
           alert("邮件地址不能为空");
           return false;
       }
       if(email.indexOf("@")==-1&&email.indexOf(".")==-1){
           alert("邮件地址应同时包含 @ . 两个符号");
           return false;
       }
       return true;
   }
 </script>
</body>
</html>

再给它稍微优化一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            width: 100px;
            height: 20px;
            /* float: left; */
        }
        div{
            width: 100px;
            height: 20px;
            background-color: blueviolet;
            /* float: left; */
            display: none;
        }
    </style>     
</head>
<body>
    <form id="myform">
    用户名：<input type="text" id="t1" value="请输入用户名">
    <br>
    密码：<input type="text" id="t2" value="请输入密码">
    <br>
    确认密码：<input type="text" id="t3" value="请确认">
    <br>    
    E-mail：<input type="text" id="t4" value="请输入邮件地址">
    <br>
    出生日期：<select id="year"></select>年
    <select id="month"></select>月
    <select id="day"></select>日
    <br>
    <input type="submit" value="登陆">
</form> 
  <script> 
  function $ (ElementID){
       return document.getElementById(ElementID);
   }
     window.onload=function (){
         var formObj=$("myform");
         formObj.onsubmit=checkAll;
         year();
         month();
         day();
        var name=$("t1");
        var pass=$("t2");
        var rpass=$("t3");
        var email=$("t4");
        name.onfocus=empty;
        pass.onfocus=empty;
        rpass.onfocus=empty;
        email.onfocus=empty;
     }
    function empty(){
        if(this.value==this.defaultValue){
            this.value="";
        }
    }
     function year(){
         var yearObj=$("year");
         var year=new Date();
           var newYear=year.getFullYear();
           for(var i=1900;i<=newYear;i++){
                yearObj.options[i-1900]=new Option(i);
           }
     }
     function month(){
         var monthObj=$("month");
         for(var i=0;i<12;i++){
             monthObj.options[i]=new Option(i+1);
         }
     }
     function day(){
         var dayObj=$("day");
         for(var i=0;i<31;i++){
            dayObj.options[i]=new Option(i+1);
         }
     }
     function checkAll(){
        var uesrObj=$("t1");
        var strName=uesrObj.value;
        var defaultName=uesrObj.defaultValue;//获取默认值
        if(strName==defaultName){
            alert("用户名为默认值，请重新输入");
            uesrObj.focus();//自动获取焦点
            return false;
        }
        if(strName.length==0){
            alert("用户名不能为空");
            uesrObj.focus();
            return false;
        }
        if(strName.length<4||strName.length>16){
            alert("用户名的长度应在4~16之间");
            uesrObj.select();//制动获取选中对象
            return false;
        }
       var passObj=$("t2");
      var strPass=passObj.value;
       if(strPass==0){
        alert("密码不能为空");
        passObj.focus();
        return false;
       }
       if(strPass.length<6||strPass.length>32){
             alert("为了保证您的安全，密码长度为6位以上32位以下");
             passObj.select();
             return false;
         }
       var rpassObj=$("t3");
       var strRpass=rpassObj.value;
       if(strRpass!=strPass){
        alert("密码与原密码不一致");
             rpassObj.select();
             return false;
       }
       var emailObj=$("t4");
       var strEmail=emailObj.value;
       if(strEmail.length==0){
            alert("邮件地址不能为空");
            emailObj.focus();
           return false;
       }
       if(strEmail.indexOf("@")==-1&&strEmail.indexOf(".")==-1){//检查是否有括号里面的符号 有的话返回 -1
        alert("邮件地址应同时包含 @ . 两个符号");
        emailObj.select();
        return false;
       }
     }
 </script>
</body>
</html>

以上就是极悦小编介绍的"JS实现登陆界面"，希望对大家有帮助，想了解更多可查看JavaScript教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。

上一篇：JS判断值是否是数字下一篇：JS字符串的定义