前端项目1--css+js登陆注册页面

最新推荐文章于 2023-02-10 20:40:47 发布

小白元宝

最新推荐文章于 2023-02-10 20:40:47 发布

阅读量1.1k

点赞数 2

分类专栏：项目专栏文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_45406288/article/details/106926119

版权

项目专栏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用css+js书写一个简单的具有登陆规范验证的前端页面

前端模块分为两个大的类，左边left还有右边right，前端模块代码

个人感觉这一部分就是简单的左边标题和右边登陆栏目的简单设置，比较好写出来，但是登陆栏中的注册登陆用户名密码等等的输入还有错误信息的提示关乎于后面的js的逻辑判断所以要慎重起名等等。

</head>
<body>
    <div class="left">
        <div class="sologan">
            <h1>wecode少儿编程</h1>
            <p>欢迎各位新同学加入wecode的大家庭</p>
        </div>
        <div class="footer">
            <p>帮助中心｜wecode123.com/</p>
        </div>
    </div>

    <div class="right">
        <form action="2423639433@qq.com">
            <table>
                <caption>欢迎注册</caption>
                <tr>
                    <td>已经有账号？<a href="https://www.wecode123.com/">登陆</a></td>
                </tr>
                <tr>
                    <td><label for="">用户名</label><input type="text"onBlur="userMethod()" id="input_user" style="width:330px;" placeholder="请设置用户名"></input></td>
                </tr>
                <tr>
                <td id="zhushi_user">用户名由3-5个字符组成</td>
                 </tr>
                <tr>
                    <td>
                        <label for="">手机号</label><input type="text" onBlur="phoneMethod()" id="input_phone"style="width:330px;"></input>
                    </td>
                </tr>
               <td id="zhushi_phone">格式样例：13866688000</td>
                <tr>
                    <td>
                        <label for="">密&nbsp;&nbsp;&nbsp;&nbsp;码</label><input type="password" onBlur="passMethod()" id="input_pass1"style="width:330px;"></input>
                    </td> 
                </tr>
                <td id="zhushi_pass1">请输入8-12位密码</td>
                </tr>
                <tr>
                    <td>
                        <label for="">验证码</label><input type="text" class=" web-form-input "
        required="required"
        id="Yzm" placeholder="请输入验证码" class="input-mini">
                        <button class="get">获取验证码</button>     <input
        type="button"
        id="code"
        value="点我验证"
        class="input-mini"
        onclick="createCode()"
      />
                    </td>
                </tr>
    </div>

                <tr>
                    <td>
                        <button class="resgit">
                            注册
                        </button>
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type="checkbox" name="" id="" checked class="check">阅读并接受《用户协议》、《用户隐私协议》
                    </td>
                </tr>



            </table>
        </form>
    </div>
    
</body>
</html>

2.css进行页面的布局和渲染，包括背景字体颜色等等

这一部分是难点在看up主手写布局的时候感觉真心厉害布局的好与坏直接影响了页面的好坏这一部分css还是要再下些功夫。

body{
    font-family: Arial, Helvetica, sans-serif;
    border: 0;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    font-size: 14px;
}
a{
    text-decoration: none;
}
.left{
    float: left;
}
.logo{
    width: 252px;
    height: 60px;
    position: absolute;
    top: 8%;
    left: 5%;
}
.logo img{
    width: 100%;
}
.sologan{
    position: absolute;
    top: 35%;
    left: 10%;
}
.sologan h1{
    font-size: 50px;
    color: #fff;
    line-height: 10px;
}
.sologan p{
    color: #fff;
    font-size: 30px;
}
.footer{
    color: #fff;
    position: absolute;
    bottom: 2%;
    left: 5%;
}
.right{
    float: right;
    position: absolute;
    right: 6%;
    top: 15%;
    height: 532px;
    width: 380px;
    background-color: rgba(255, 255, 255,0.9);
    border-radius: 25px;
    padding: 50px;
}
table,tr,td{
    width: 100%;
}
tr{
    height: 30px;
}
caption{
    font-size: 40px;
    text-align: left;
    font-weight: 700;
}
label{
    color: #333;
    text-align: right;
    margin-right: 20px;
    width: 20%;
}
input{
    color: #ccc;
    height: 40px;
    border: 1px solid #ccc;
    width: 80%;
    border-radius: 5px;
}
.input-mini{
    color: #ccc;
    height: 40px;
    border: 1px solid #ccc;
    width: 45%;
    border-radius: 5px;
    box-sizing: border-box;
    vertical-align: top;
    margin-right: 5%;

}
.get{
    width: 30%;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    text-align: center;
    height: 40px;
}
.resgit{
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 20px;
    background-color: royalblue;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    margin: 20px 0 20px 0;
}
.check{
    line-height: 14px;
    width: 14px;
    height: 14px;
}

3.js模块进行登录名手机号密码的检验验证码的提交和验证

这一部分的基本逻辑还是挺简单的但是是要和前面的html和css联系所以还是有点容易出错后面验证码的随机提取和验证还是要接着看一看。

 <script type="text/javascript">
    function userMethod()
    {
        var user = document.getElementById("input_user").value;
        if(user.length>5||user.length<3)
            {
            document.getElementById("zhushi_user").style.color="red";
            }
        else document.getElementById("zhushi_user").style.color="green";
    }
    function passMethod()
    {
        var pass = document.getElementById("input_pass1").value;
        if(pass.length>12||pass.length<8)
            {
            document.getElementById("zhushi_pass1").style.color="red";
            }
        else document.getElementById("zhushi_pass1").style.color="green";
    }

    function phoneMethod()
    {
        var phone_num = document.getElementById("input_phone").value;
        var pattern = /^1[0-9]{10}$/;       //phone的正则表达式
        if(!pattern.test(phone_num))
            {
            document.getElementById("zhushi_phone").style.color="red";
            }
        else  
        {
            document.getElementById("zhushi_phone").style.color="green";
        }
    }
  
    function checkAll(){
        userMethod();
        passMethod();
        phoneMethod();
    }
      // 在全局定义验证码
      let code 
      // 产生验证码函数
      let createCode = () => {
        code = ''
        let codeLength = 4 // 验证码的长度
        let checkCode = document.getElementById('code')
        // 随机数
        let random = [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'I',
          'J',
          'K',
          'L',
          'M',
          'N',
          'O',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'U',
          'V',
          'W',
          'X',
          'Y',
          'Z'
        ]
        for (let i = 0; i < codeLength; i++) {
          // 循环操作
          let index = Math.floor(Math.random() * 36) // 取得随机数的索引（0~35）
          code += random[index] // 根据索引取得随机数加到code上
        }
        checkCode.value = code // 把code值赋给验证码
      }
      // 网页一刷新就刷新验证码
      createCode()
      // 验证码校验函数
      let validate = () => {
        let inputCode = document.getElementById('Yzm').value.toUpperCase() // 取得输入的验证码并转化为大写
        if (inputCode.length <= 0) {
          // 若输入的验证码长度为0
          alert('请输入验证码！') // 则弹出请输入验证码
          $('#Yzm').focus() // 重新聚焦验证码框
          YZM = false
        } else if (inputCode != code) {
          // 若输入的验证码与产生的验证码不一致时
          alert('验证码输入错误！@_@') // 则弹出验证码输入错误
          createCode() // 刷新验证码
          $('#Yzm').val('') // 清空文本框
          $('#Yzm').focus() // 重新聚焦验证码框
          YZM = false
        } else {
          // 输入正确时
          $('#Yzm').blur() // 绑定验证码输入正确时要做的事
          YZM = true
          alert('验证码输入正确！@_@')
        }
      }
      // 校验验证码
      document.getElementById('Yzm').addEventListener('change', validate)

</script>

借鉴一下up主和博主的代码和视频感谢大佬

https://www.bilibili.com/video/BV1j7411D7fL

https://fifteen718.blog.csdn.net/article/details/50836046?utm_source=app&from=singlemessage

https://blog.csdn.net/qq_43258252/article/details/87386453

后续将进行lesscss添加和jquery的交互。

小白元宝

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
前端项目1--css+js登陆注册页面

用css+js书写一个简单的具有登陆规范验证的前端页面前端模块分为两个大的类，左边left还有右边right，前端模块代码个人感觉这一部分就是简单的左边标题和右边登陆栏目的简单设置，比较好写出来，但是登陆栏中的注册登陆用户名密码等等的输入还有错误信息的提示关乎于后面的js的逻辑判断所以要慎重起名等等。</head><body> <div class="left"> <div class="sologan"&gt
复制链接

扫一扫