专注Java教育14年 全国咨询/投诉热线：444-1124-454
赢咖4LOGO图
始于2009，口口相传的Java黄埔军校
首页 hot资讯 JS实现登陆界面

JS实现登陆界面

更新时间：2021-09-03 10:37:52 来源：赢咖4 浏览764次 

<!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>

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

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

相关阅读

最新文章

  • 男 女

提交申请后，顾问老师会电话与您沟通安排学习

课程大纲 学习路线 毕业设计 开发工具
免费课程推荐 >>
技术文档推荐 >>
  • 赢咖4注册班
  • 热点话题
  • 城市分站
  • 资源广场
  • 热门专题
赢咖4注册实验班 赢咖4注册就业班 赢咖4注册夜校班 赢咖4注册在职加薪班 赢咖4注册架构师班 赢咖4注册课程
赢咖4注册动态 零基础学Java Java职场就业
北京赢咖4注册 广州赢咖4注册 深圳赢咖4注册 上海赢咖4注册 武汉赢咖4注册 成都赢咖4注册 西安赢咖4注册 郑州赢咖4注册 南京赢咖4注册 长沙赢咖4注册
Java书籍 Java视频教程 Java毕业设计 Java面试题 Java API文档 Java开发工具 Java赢咖4在线学习
上海java培训 北京java培训 深圳java培训 广州java培训 武汉java培训 成都java培训 西安java培训 郑州java培训 南京java培训 长沙java培训 java线上培训班
更新时间：2024-05-20 04:46:46 免费电话：444-1124-454 备案号：京ICP备09027468号