用JS怎样实现注册表单，详细步骤过程是什么

lewis 1年前 (2024-04-12) 阅读数 7 #技术

这篇文章主要讲解了“用JS怎样实现注册表单，详细步骤过程是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

基本操作

document.getElementById()：获取页面元素
alert()：向页面弹出提示框。
innerHTML：操作页面某个元素的内容，可以获取，也可以赋值。
document.write()：向页面中写内容。

本案例实现注册表单的基本验证功能，主要实现非空验证、重复输入验证、邮箱验证（正则验证），通过alert提示对话框给予用户提示信息。并且当用户输入非法时阻止表单提交。

步骤分析：

第一步：绑定事件(onsubmit)。为form表单绑定onsubmit事件,并调用一个自定义函数。
第二步：编写该函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(表单提交)
第五步：数据非法(给出错误提示信息，阻止表单提交)

【问题】如何控制表单提交？

关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。 onsubmit = return checkForm()
案例实现效果：当点击“注册”按钮时，验证表单输入内容是否合法，如果不合法则给出用户提示对话框，并且表单无法提交。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   function checkFrm() {
    var usernameValue = document.getElementById("username").value;
    if(usernameValue == ""){
     alert("用户名不能为空");
     return false;
    }
    var passwrodValue = document.getElementById("password").value;
    if(passwrodValue ==""){
     alert("密码不能为空");
     return false;
    }
    var emailValue = document.getElementById("email").value;
    var rule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
    if(rule.test(emailValue)) {
     alert("输入邮箱格式非法!");
     return false;
    }
   }
  </script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
   }
   body{
    background-color: azure;
   }
   .rg_layout{
    width:900px;
    height: 500px;
    margin: auto;
    background-color: white;
    border: 8px solid #EEEEEE;
    margin-top:30px;
   }
   .rg_left {
    border: 1px solid red;
    width: 200px;
    padding: 10px;
    float: left;
   }
   .rg_center{
    
    width:450px;
    float: left;
   }
   .rg_right{
    border: 1px solid red;
    width: 200px;
    float: right;
   }
   .td_left {
    width:100px;
    text-align: right;
    height: 45px;
   }
   .td_right{
    
    padding-left: 15px;
   }
   #username,#password,#email,#tel ,#name,#birthday,#checkcode{
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6;
    border-radius: 5px;
    padding-left: 10px;
   }
   #checkcode{
    width: 110px;
   }
   #btn-sub{
    width:150px;
    height:40px;
    background-color: #00CCFF;
    border:1px solid #00CCFF;
     border-radius: 5px;
   }
   #img_check{
    height: 32px;
    vertical-align: middle;//垂直居中
   }
  </style>
 </head>
 <body>
  <div class="rg_layout">
   <div class="rg_left">
    <p>新用户注册</p>
    <P>USER REGISTER</P>
   </div>
   <div class="rg_center">
    <form action="#" method="get" onsubmit="return checkFrm()">
     <table>
      <tr>
       <td class="td_left">
        <label for="username">用户名：</label>
       </td>
       <td class="td_right">
        <input type="text" name="username" placeholder="请输入用户名" id="username">
       </td>
      </tr>
      <tr>
       <td class="td_left">
        <label for="password">密码：</label>
       </td>
       <td class="td_right">
        <input type="password" name="password" placeholder="请输入密码"id="password">
       </td>
      </tr>
      <tr>
       <td class="td_left">
        <label for="email">Email：</label>
       </td>
       <td class="td_right">
        <input type="email" name="email" id="email">
       </td>
      </tr>
      <tr>
       <td class="td_left">
        <label for="name">姓名：</label>
       </td>
       <td class="td_right">
        <input type="text" name="name" id="name">
       </td>
      </tr>
      <tr>
       <td class="td_left">
        <label for="tel">手机号：</label>
       </td>
       <td class="td_right">
        <input type="text" name="tel" id="tel">
       </td>
      </tr>
      <tr>
       <td class="td_left"><label >性别：</label></td>
       <td class="td_right">
        <input type="radio" name="gender" value="man">男
         <input type="radio" name="gender" value="woman">女
        </td>
      </tr>
      <tr>
       <td class="td_left"><label for="birthday">出生日期</label></td>
       <td class="td_right">
        <input type="date" name="birthday" id="birthday">
       </td>
      </tr>
      <tr>
       <td class="td_left"><label for="checkcode">验证码</label></td>
       <td class="td_right">
        <input type="text" name="checkcode" id="checkcode">
        <img src="#" id="img_check">
       </td>
      </tr>
      <tr>
       <td colspan="2" align="center"><input type="submit" value="注册" id="btn-sub"/></td> 
      </tr>

     </table>  
    </form> 
   </div>
   <div class="rg_right">
    <P>已有账号<a href="#" rel="external nofollow" >立即登录</a></P> 
   </div>
  </div>
 </body>
</html>

到此这篇关于“用JS怎样实现注册表单，详细步骤过程是什么”的文章就介绍到这了,更多相关用JS怎样实现注册表单，详细步骤过程是什么内容，欢迎关注博信技术资讯频道，小编将为大家输出更多高质量的实用文章！

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：access怎么给某表添加一条新记录下一篇： Qt应用程序输出窗口乱码的问题通常是由于字符编码设置不正确引起的

用JS怎样实现注册表单，详细步骤过程是什么

步骤分析：

版权声明

作者文章