直接使用代码

图片素材

无

css代码

<!--图标库-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'> 
<style>
html{--black:#1c1e21;--border-color:#2f3337;--white:#e4e4e4;--text-white:#fff;--text-gray:#9b9c9d;--primary-color:#5268f4;--radius:8px;--focus-color:#25272a;--warning-color:#f86262;}
.login-box{width:480px;color:var(--text-gray);background-color:var(--black);border-radius:var(--radius);padding:50px;padding-bottom:65px;}
.login-box .form{width:100%;height:100%;display:flex;flex-flow:column nowrap;line-height:1.45;}
.login-box .form .headline{color:#fff;font-size:22px;font-weight:500;margin-bottom:15px;}
.login-box .form .description{max-width:85%;}
.login-box .form h5{font-size:12px;text-align:center;margin:20px 0 12px;}
.input-field{margin-top:30px;margin-bottom:20px;}
.input-field .input-box{display:flex;cursor:pointer;align-items:center;width:100%;border:1px solid var(--border-color);border-radius:var(--radius);padding:15px;}
.input-field .input-box:not(:last-child){margin-bottom:25px;}
.input-field .input-box i{font-size:16px;}
.input-field .input-box:hover{background-color:var(--focus-color);}
.input-field .input-box:focus-within{background-color:var(--focus-color);border-color:var(--primary-color);}
.input-field .input-box:focus-within i{color:var(--white);}
.input-field .input-box[for="email"]{position:relative;}
.input-field .input-box[for="email"] .error-message{display:none;color:var(--warning-color);position:absolute;font-size:11px;left:15px;bottom:-20px;}
.input-field .input-box[for="email"].error{border-color:var(--warning-color);}
.input-field .input-box[for="email"].error i.fas{color:var(--warning-color);}
.input-field .input-box[for="email"].error .error-message{display:block;}
.input-field input{width:100%;border:0;outline:0;background-color:transparent;margin-left:12px;color:var(--white);}
.input-field input::placeholder{color:#494b4d;}
.label[for="term-of-use"]{-webkit-user-select:none;user-select:none;margin-top:15px;margin-bottom:25px;padding-left:15px;}
.label[for="term-of-use"] input{position:absolute;opacity:0;width:0;height:0;cursor:pointer;}
.label[for="term-of-use"] input:checked + .checkmark{background-color:var(--primary-color);}
.label[for="term-of-use"] input:checked + .checkmark::before{display:block;}
.label[for="term-of-use"] .checkmark{cursor:pointer;vertical-align:middle;display:inline-block;width:18px;height:18px;border-radius:4px;background-color:transparent;border:1px solid var(--border-color);margin-right:5px;position:relative;}
.label[for="term-of-use"] .checkmark::before{display:none;content:"";width:4px;left:6px;top:3px;height:8px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);position:absolute;}
.label[for="term-of-use"] .checkmark:hover{background-color:var(--focus-color);}
.button{-webkit-user-select:none;user-select:none;cursor:pointer;user-select:none;border:0;outline:0;background-color:var(--primary-color);font-weight:400;font-family:inherit;color:#fff;padding:15px 32px;text-align:center;border-radius:var(--radius);}
.button:hover{background-color:#3f57f3;}
.button:active{color:#9b9c9d;background:#3a4797;}
.social{display:flex;justify-content:center;margin-bottom:25px;}
.social .icon-holder{cursor:pointer;width:42px;height:42px;display:inline-grid;place-content:center;position:relative;padding:15px;border-radius:50%;border:1px solid var(--border-color);margin-right:15px;}
.social .icon-holder:hover{background-color:#1da1f2;}
.social .icon-holder:hover > i{color:#fff;}
.social i{font-size:16px;color:var(--white);}
.login{text-align:center;color:var(--white);}
html{width:100%;height:100%;padding:0;margin:0;box-sizing:border-box;}
*,*::before,*::after{box-sizing:inherit;}
body{width:100%;height:100vh;font-family:"Roboto",sans-serif;font-weight:400;font-size:14px;line-height:1.15;background-image:linear-gradient(45deg,#7c5ffe,#586ae6);display:flex;justify-content:center;align-items:center;}
a{text-decoration:none;color:var(--primary-color);}

</style>

HTML+JS代码

 
<div class="login-box">
  <form class="form">
    <h2 class="headline">
      <div>
        已注册会员超2500万
      </div>学习者来自世界各地
    </h2>
    <p class="description">掌握网页语言：HTML，CSS和JavaScript。此路径将帮助您构建基本网站，然后构建交互式web应用程序。</p>
    <div class="input-field">
      <label class="input-box" for="email">
        <i class="fas fa-envelope"></i>
        <input type="email" name="email" id="email" placeholder="输入邮箱" autocomplete="off" />
        <span class="error-message">请输入正确有效的邮箱地址</span>
      </label>
      <label class="input-box" for="username">
        <i class="fas fa-user-circle"></i>
        <input type="text" name="user-name" id="username" placeholder="用户名">
      </label>
      <label class="input-box" for="password">
        <i class="fas fa-lock"></i>
        <input type="password" name="password" id="password" placeholder="密码">
      </label>
    </div>
    <label class="label" for="term-of-use">
      <input type="checkbox" name="term-of-use" id="term-of-use">
      <span class="checkmark"></span>
      我同意 <a href="#">使用条款</a>
    </label>
    <button class="button" type="submit">提交注册</button>
    <h5>或使用第三方注册</h5>
    <div class="social">
      <div class="icon-holder">
        <i class="fab fa-google"></i>
      </div>
      <div class="icon-holder">
        <i class="fab fa-facebook-square"></i>
      </div>
      <div class="icon-holder">
        <i class="fab fa-twitter"></i>
      </div>
      <div class="icon-holder">
        <i class="fab fa-github"></i>
      </div>
    </div>
    <div class="login">
      <p>已经是会员了？ <a href="#">登录</a></p>
    </div>
  </form>
</div>

<script>

  function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
  }

  const form = document.querySelector('form');

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    const email = this.querySelector('input[type="email"]');

    if (validateEmail(email.value)) {
      console.log('validate email');
      email.parentNode.classList.remove('error');
    } else {
      email.parentNode.classList.add('error');
    }
    this.reset();
  });
</script>