js頁面用戶信息填寫表單

本文轉載自查看原文 2016-09-02 10:23 3463 javascript

在網頁中我們會經常看見各色的用戶信息填寫表單，其中會包括各種輸入框、按鈕、單復選框和下拉式菜單，今天的我們就以最簡單的為例做一個簡易版的用戶信息填寫表單（此處使用html文本），僅供初學者參考，也請各位前輩多多指教！

在這個范例當中，我們將對用戶輸入的信息做簡易驗證。主要判讀那用戶名、密碼、確認密碼不能為空，密碼和確認密碼要保持一致。

注意點：

1、用戶信息的填寫如果是在一張form表單中，則只能出現一個submit按鈕提交，這種情況比較簡易，只需要在body模塊<form>中添加onSubmit="return check(this)"。

但如果是多個form分別提交，此時script中的function check(Form)要與<body>中的不同form一一對應才可分別做輸入合法性驗證。

2、通過for循環將form的表單里的element遍歷，主要for循環的條件范圍，此范例以前三個元素為例。

3、演示的效果為窗口彈出 ----- ”title“不能為空。如用戶名不能為空

<!DOCTYPE HTML>
<html>
<head>
<title>個人信息填寫</title>
<meta charset='utf-8'>
<style type="text/css">
*{
      margin: 0;
      padding: 0;
      list-style: none;
     }
     body{
      font-family: sans-serif,Verdana, Helvetica, Arial;
     }
         #main{
          padding-left: 350px;
         }
        .kv-item{
     padding-left: 100px;
     padding-bottom: 20px;
       }
        .kv-label{
     display: inline;
     height: 28px;
     line-height: 28px;
     margin-left: -100px;
     float: left;
     text-align: right;
     width: 100px;
       }
       .text-align{
     border:1px solid #474E63;
     color: #0A1844;
     height: 26px;
     line-height:26px;
     padding:0 2px;
     width: 177px; 
     text-align: left;
        }
        #submit{
     margin-left: 80px;
     border:1px solid #474E63;
     height: 26px;
     font-weight: bold;
       }
       #reset{
     border:1px solid #474E63;
     height: 26px;
     font-weight: bold;
       }
 </style>
 <!--CSS部分結束-->
 <!--此處插入JS代碼-->
 <script type="text/javascript">
        //判斷前三個表單元素（用戶名、密碼、確認密碼是否為空）
   function check(Form){
 var check=true;
 var flag=0;
 for(i=0;i<3;i++){
  if(Form.elements[i].value=="")
  {alert(Form.elements[i].title+"不能為空！");
  Form.elements[i].focus();
  check=false;
  return false;}
  //判斷兩次輸入的密碼是否相同
  if(i==2)
  if(Form.pwd.value!=Form.repwd.value)
   {alert("兩次輸入密碼不同，請重新輸入！");
  Form.repwd.value="";
     Form.pwd.value="";
  //Form.pwd.focus();
  i=i-2;
  continue;
  }
 }
return check;
}
</script>
<!--JS代碼結束-->
</head>
<body background="8.jpg">
    <h1 align="center">個人信息填寫 </h1>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
   <div id="main">
         <form name="personalForm" method="post" action="RegisterController" onSubmit="return check(this)">
           <div class="kv-item">
               <span class="kv-label">
             <label class="tsl" for="name">昵稱：</label>
              </span>
               <input type="text" name="name"class="text-align" id="name" placeholder="*必填項" autofocus size="25" title="用戶名" >
         </div>
       
       <div class="kv-item">
        <span class="kv-label">
         <label class="tsl" for="pwd">密&nbsp;碼：</label>
        </span>
        <input type="password" name="pwd" class="text-align" id="pwd" placeholder="*必填項" size="25" title="密碼" >
       </div>
   
      <div class="kv-item">
           <span class="kv-label">
            <label class="tsl" for="repwd">確認密碼：</label>
           </span>
           <input type="password" name="repwd" class="text-align" id="repwd" placeholder="*必填項" size="25" title="確認密碼">
       </div>
        
       <div class="kv-item">
        <span class="kv-label">
         <label class="tsl" for="sex_boy">性&nbsp;別：</label>
        </span>
        <input type="radio" name="sex"  value="M" checked >男
        <input type="radio" name="sex"  value="F">女
       </div>
    
       <div class="kv-item">
        <span class="kv-label">
         <label class="tsl" for="student">生&nbsp;日：</label>
        </span>
        <table>
        <tr>
        <th>
        <select>
          <option value="公歷">公歷</option>
          <option value="農歷">農歷</option>
        <select>
        </th>
        
        <th>
        <select>
          <option value="年">年</option>
          <option name="year" value="2016">2016</option>
          <option name="year" value="2015">2015</option>
          <option name="year" value="2014">2014</option>
          <option name="year" value="2013">2013</option>
        <select>
        </th>
        <th>
        <select>
          <option name="month" value="月">月</option>
          <option name="month"value="01">01</option>
          <option name="month"value="02">02</option>
          <option name="month"value="03">03</option>
          <option name="month"value="04">04</option>
          <option name="month"value="05">05</option>
          <option name="month"value="06">06</option>
          <option name="month" value="07">07</option>
          <option name="month"value="08">08</option>
          <option name="month"value="09">09</option>
          <option name="month"value="10">10</option>
          <option name="month"value="11">11</option>
          <option name="month"value="12">12</option>
        <select>
        </th>
        <th>
        <select>
          <option value="日">日</option>
          <option  name="day"value="01">01</option>
          <option  name="day"value="02">02</option>
          <option  name="day"value="03">03</option>
          <option  name="day"value="04">04</option>
          <option  name="day" value="05">05</option>
          <option  name="day"value="06">06</option>
          <option  name="day"value="07">07</option>
          <option  name="day" value="08">08</option>
          <option  name="day"value="09">09</option>
          <option  name="day"value="10">10</option>
          <option  name="day"value="11">11</option>
          <option  name="day"value="12">12</option>
          <option  name="day"value="13">13</option>
          <option  name="day"value="14">14</option>
          <option  name="day"value="15">15</option>
          <option  name="day"value="16">16</option>
          <option  name="day"value="17">17</option>
          <option  name="day"value="18">18</option>
          <option  name="day"value="19">19</option>
          <option  name="day"value="20">20</option>
          <option  name="day"value="21">21</option>
          <option  name="day"value="22">22</option>
          <option  name="day"value="23">23</option>
          <option  name="day"value="24">24</option>
          <option  name="day"value="25">25</option>
          <option  name="day"value="26">26</option>
          <option  name="day"value="27">27</option>
          <option  name="day"value="28">28</option>
          <option  name="day"value="29">29</option>
          <option  name="day"value="30">30</option>
          <option  name="day"value="31">31</option>
        <select>
        </th>
        </tr>
        </table>
     </div>
   
  <div class="kv-item">
    <span class="kv-label">
     <label class="tsl" for="student">地&nbsp;址：</label>
    </span>
    <table>
        <tr>
                <th>
                <select>
                  <option value="省、直轄市">省、直轄市</option>
                  <option value="上海市">上海市</option>
                  <option value="河南省">河南省</option>
                  <option value="安徽省">安徽省</option>
                <select>
            </th>
            <th>
                <select>
                  <option value="市">市</option>
                  <option value="上海">上海</option>
                  <option value="焦作">焦作</option>
                  <option value="巢湖">巢湖</option>
                <select>
            </th>
            <th>
               <select>
                 <option value="區、縣">區、縣</option>
                 <option value="黃埔">黃埔</option>
                 <option value="普陀">普陀</option>
                 <option value="浦東新區">浦東新區</option>
               <select>
           </th>
     </tr>
   </table>
   </div>
   
       <div class="kv-item">
        <span class="kv-label">
         <label class="tsl">手機號碼：</label>
        </span>
         <input type="password" name="telephone" class="text-align"  placeholder="*必填項" size="25" title="手機號碼">
       </div>
   
       <div class="kv-item">
        <input type="submit" name="submit" id="submit" value="提交" >
        <input type="reset" name="reset" id="reset" value="重置"></div>
  </form>
 </div>
</body>
</html>

演示效果為：

當某一項不填寫時，演示樣式為：

代碼演示完畢，有什么不恰當的請多多指教！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 怎樣使我們的用戶不再抵觸填寫Form表單？如何避免提交頁面，信息未填寫完善就出現注冊成功提示基於js uni-app調用微信收貨地址的原生界面，並返回用戶填寫的地址信息到上一個頁面關於H5填寫信息類頁面橫向布局總結前端填寫表單未提交退出，保存提交的信息到瀏覽器（本地）防止瀏覽器記住或自動填寫用戶名和密碼(表單)的終極解決方案 Fort.js – 時尚、現代的表單填寫進度提示效果 VisualSVN:強制必須填寫日志信息蘋果稅務信息填寫教程 web安全：防止瀏覽器記住或自動填寫用戶名和密碼(表單)的終極解決方案