JavaScript表单案例

style

body {
            font-family: Arial,Helvetica,sans-serif;
            line-height: 1.6;
        }

        ul {
            list-style: none;
        }

        ul li {
            padding: 5px;
            background: #f4f4f4;
            margin: 5px 0;
        }
        
        header {
            background-color: #f4f4f4;
            padding: 1rem;
            text-align: center;
        }

        .container {
            margin: auto;
            width: 500px;
            overflow: auto;
            padding: 3rem 2rem;
        }

        #my-form {
            padding: 2rem;
            background: #f4f4f4;
        }

        #my-form label {
            display: block;
        }

        #my-form input[text='text'] {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        .btn {
            display: block;
            width: 100%;
            padding: 10px 15px;
            border: 0;
            background: #333;
            color: #fff;
            border-radius: 5px;
            margin: 5px 0;
        }

        .btn:hover {
            background: #444;
        }

        .bg-dark {
            background: #333;
            color: #fff;
        }

        .error {
            background: orangered;
            color: #fff;
            padding: 5px;
            margin: 5px;
        }

html

<header>
      <h1>JS表单效验</h1>
  </header>
   <section class="container">
       <form id="my-form">
            <h1>注册</h1>
            <div class="msg"></div>
            <div>
                <label for="name">用户名</label>
                <input type="text" id="name">
            </div>
            <div>
                <label for="password">密码</label>
                <input type="password" id="password">
            </div>
            <div>
                <label for="email">邮箱</label>
                <input type="text" id="email">
            </div>
            <input  class="btn"  type="submit" value="Submit">
       </form>
       <ul id="users"></ul>
   </section>

JavaScript

        const myForm = document.querySelector('#my-form')
        const nameInput = document.querySelector('#name')
        const passwordInput = document.querySelector('#password')
        const emailInput = document.querySelector('#email')
        const msg = document.querySelector('.msg')
        const userList = document.querySelector('#users')

        myForm.addEventListener('submit',onsubmit);
        function onsubmit(e){
           e.preventDefault();
           if(nameInput.value === '' || emailInput.value === '' || passwordInput.value === ''){
               msg.classList.add('error')
               msg.innerHTML='请输入用户名和密码'
               setTimeout(()=> msg.remove(),3000);
           } else {
               //创建一个新的li元素 文本节点
              const li = document.createElement('li');
               // 插入带有输入框文本值的节点 往创建的li中添加
              li.appendChild(document.createTextNode(`${nameInput.value} : ${emailInput.value} : ${passwordInput.value}`));
              // 将li插入到ul
              userList.appendChild(li);
              // 清空输入框 
              nameInput.value = '';
              emailInput.value = '';
              passwordInput.value ='';
           }
        }