首页 > 代码库 > 如有如下注册界面，请写出相应的html和Script脚本

如有如下注册界面，请写出相应的html和Script脚本

2024-09-11 19:15:16   224人阅读

如有如下注册界面，请写出相应的html和Script脚本

 

　　技术分享

 

　　我们经常会遇到这样的需求，今天用原生js来实现。

   

　　实现思路：

　　1、布局，通过div层将 用户名输入，密码输入、确认密码输入，垂直排列

      用户名、输入框、提示分别用Label、input、span,

　　要注意的是Label、input、span都是行级元素，需要转换成块级元素进行宽高设置。

　　布局的图：如下

　　技术分享

      2.根据布局分层次设置布局的样式

 

　　3.JS里实现button的点击事件，通过JS，DOM操作获取input的值，进行验证。

 

　　代码实现:

　　register.html:

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="register.css" type="text/css">
    <script type="text/javascript" src="register.js"></script>

</head>
<Script></Script>
<body class="body">

    <div class="nav"   >
        <div class="navitem">
            <label class="label" >用户名:</label>
            <input  class="registerinput"  type="text" id="register_name"  />
            <span class="register_error" id="register_name_error"  >请输入字母和数字</span>
        </div>

        <div class="navitem" >
            <label class="label"  >密码:</label>
            <input class="registerinput"  type="password" id="password" />
            <span class="register_error" id="password_error"  >请输入数字密码</span>
        </div>

        <div class="navitem">
            <label class="label" >确认密码:</label>
            <input class="registerinput" type="password" id="affirmpassword"   />
            <span class="register_error" id="affirm_password_error"  >请输入确认密码</span>
        </div>

        <div class="navbtn" >
            <Button class="myBtn"  id="myBtn" type="button" >注册</Button>
        </div>
    </div>
</body>
</html>

　　register.css:

　　

.body{background-color: azure}
.nav {  text-align: center;margin: 180px 500px 60px 500px;  border: 1px;}
.navitem{margin: 20px 0; }
.label{display:inline-block;  width:100px;  line-height: 44px;  color: #999; text-align: left; }
.registerinput{display:inline-block;width:200px;text-align: left; box-sizing: border-box;  padding: 10px 0;  border: 0;background-color: #ededed}
.register_error{display:inline-block; width:200px;text-align: left;margin-left: 10px;}
.navbtn{margin-top: 60px}
.myBtn{width: 200px;height:40px; background-color: #ededed;border: 0}

　　register.js:

　　

/**
 * Created by Administrator on 2017/3/31.
 */
window.onload=function () {//页面加载后执行
    document.getElementById("myBtn").onclick=function(){changetext()};

    function changetext()
    {

        var regpassword = new RegExp("^[0-9]*$");
        var regloginName = new RegExp("^[0-9a-zA-z]*$");

        var login_name=document.getElementById(‘register_name‘).value;
        var password=document.getElementById(‘password‘).value;
        var affirmpassword=document.getElementById(‘affirmpassword‘).value;

        var  login_name_error=document.getElementById(‘register_name_error‘);
        var  password_error=document.getElementById(‘password_error‘);
        var  affirm_password_error=document.getElementById(‘affirm_password_error‘);

        //重置验证提示信息
        login_name_error.innerHTML="";
        login_name_error.style.color="black"
        password_error.innerHTML="";
        password_error.style.color="black"
        affirm_password_error.innerHTML="";
        affirm_password_error.style.color="black"

        console.log(login_name);
        console.log(password);
        console.log(affirmpassword);

        if(login_name.length==0){
            login_name_error.innerHTML="登录名不能为空";
            login_name_error.style.color="red";
            return;
        }

        if(!regloginName.test(login_name)){
            login_name_error.innerHTML="登录名必须是数字或字母";
            login_name_error.style.color="red";

            return;
        }

        if(password.length==0){
            password_error.innerHTML="密码不能为空";
            password_error.style.color="red";

            return;
        }
        if(affirmpassword.length==0){
            affirm_password_error.innerHTML="确认密码不能为空";
            affirm_password_error.style.color="red";

            return;
        }

        if(!regpassword.test(password)){
            password_error.innerHTML="密码请输入数字";
            password_error.style.color="red";
            return;
        }
        if(password.length>6){
            password_error.innerHTML="密码不能超过6位";
            password_error.style.color="red";
            return;
        }
        if(password!==affirmpassword){
            password_error.innerHTML="两次密码输入必须相同";
            password_error.style.color="red";
            return;
        }

        alert(‘注册成功‘);
    }
}

 

如有如下注册界面，请写出相应的html和Script脚本


联系
我们