css 实例:注册页面

admin · 发表于 2022-8-17 10:20:10

[mw_shl_code=html,true]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
<script src="./Jquery.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script>
<style>
      body {
         background-image: url(./imgs/bg3.png);
         background-size: 100%;
         background-repeat: repeat;
      }

      .layui-form {
         width: 350px;

      }

      .layui-input-block {
         margin-left: 0;
      }

      .layui-form-item .layui-input-inline {
         width: 230px;
      }

      .layui-form {
         padding: 10px 20px;
         border: 2px solid rgba(253, 253, 253, 0.062);
         border-radius: 18px;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         box-shadow: 0 0 16px 9px rgba(27, 27, 27, 0.07);
      }

      h2 {
         padding: 20px;
         font-weight: 600;
         text-align: center;
      }

      #yzmDiv {
         margin-bottom: 0;
         margin-right: 0;
      }

      .layui-input,
      .layui-select,
      .layui-textarea {
         background: rgba(255, 255, 255, 0.062);
         border-color: rgba(255, 255, 255, 0.74);
         border-radius: 4px;
      }

      .layui-form {
         background-color: #b0d1cf21;
      }
</style>
</head>

<body>
<form class="layui-form" action="">
      <i class="layui-icon layui-icon-wifi" style="font-size: 30px; color: #1E9FFF;"></i>
      <h2>欢迎来到注册页面</h2>
      <div class="layui-form-item">

         <div class="layui-input-block">
            <input type="text" name="phone" lay-verify="phone" autocomplete="off" placeholder="手机"
                  value="13784116427" class="layui-input">
         </div>
      </div>

      <div class="layui-form-item">
         <div class="input-block">
            <div class="layui-inline" id="yzmDiv">
                  <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="验证码" value=""
                     class="layui-input layui-input-inline">

                  <button type="button" id="yzm" tabindex='-1'
                     class="layui-btn layui-btn-primary layui-border-green ">获取验证码</button>
            </div>

         </div>

      </div>

      <div class="layui-form-item">

         <div class="layui-input-block">
            <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="邮箱"
                  value="1810763210@qq.com" class="layui-input">
         </div>
      </div>
      <div class="layui-form-item">

         <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="用户名"
                  value="administrator" class="layui-input">
         </div>
      </div>
      <div class="layui-form-item">

         <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="密码"
                  value="admin" class="layui-input">
         </div>
      </div>
      <div class="layui-form-item" pane="">
         <div class="layui-input-block">
            <input type="checkbox" name="协议是否同意" lay-skin="primary" checked title="同意用户协议">
         </div>
      </div>

      <div class="layui-form-item">
         <button type="button" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="Emo">注册</button>
      </div>
</form>
</body>
<script>

layui.use('form', function () {

      this.form.on('submit(Emo)', function (data) {
         console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
         data.field = JSON.stringify({
            "user":
                  data.field
         })

         // return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
         $.ajax({
            type: "

OST",
            url: "http://8.140.34.53:3001/api/users",
            contentType: "application/json", //必须这样写
            dataType: "json",
            data: data.field,//schoolList是你要提交是json字符串
            success: function (res) {
                  var jeep = function () {
                     location.href = './logon.html'
                  }
                  setInterval(jeep, 2000)
                  return layer.msg('注册成功！正在跳转中···')
            },
            error: function (res) {
                  console.log(res)
            }

         })
      });
})
$('#yzm').on('click', function () {
      var phone = $('[name="phone"]').val()
      if (!phone.length) {
         return layer.msg('请输入手机号');
      }

      var reg = /^(?

?:\+|00)86)?1[3-9]\d{9}$/
      if (!reg.test(phone)) {
         return layer.msg('请输入正确手机号');
      } else {

         phone = JSON.stringify({
            user: {
                  phone: phone
            }
         })
         $.ajax({
            type: "

OST",
            url: "http://8.140.34.53:3001/api/message",
            contentType: "application/json", //必须这样写
            dataType: "json",
            data: phone,//schoolList是你要提交是json字符串
            success: function () {
                  return layer.msg('发送验证码成功')
                  alert(123)
            },
            error: function (res) {
                  var msgg = res.responseJSON.errors[0].msg
                  if (msgg == '手机号已存在') {
                     return layer.msg(msgg)
                  }

            }

         })
      }

})

</script>

</html>[/mw_shl_code]

		自动登录	找回密码
密码			立即注册

css 实例:注册页面

相关帖子