表單實例（判斷兩次密碼是否一致）

時間 2020-06-09

標籤表單實例判斷兩次密碼是否一致欄目 HTML 简体版

原文原文鏈接

表單實例（判斷兩次密碼是否一致）

1、實例描述：

本例是一個綜合性的練習，除了們正在學習的JS知識外，還用到了HTML的表格，表單等相關知識。javascript

2、截圖

3、代碼

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>課堂演示</title>    
 6     <style type="text/css">
 7  table{
 8  margin: 20px auto;
 9  border: 2px solid orange;
 10     }
 11  td{
 12  height: 40px;
 13  line-height: 40px;
 14  padding: 5px;
 15  width: 200px;
 16  background: rgba(100,50,10,0.3);
 17  text-align: right;
 18  font-size: 24px;
 19     }
 20  select,input{
 21  width: 200px;
 22  height: 40px;
 23  font-size: 18px;
 24     }
 25  [type=radio]{
 26  width: 30px;height: 30px;
 27     }
 28  [type=submit],[type=reset]{
 29  width: 150px;
 30  border-radius: 25px;
 31  font-size: 20px;
 32  outline: none;
 33     }
 34  td:first-child{
 35  width: 150px  36     }
 37     </style>
 38 </head>
 39 <body>
 40     <table>
 41         <tr>
 42             <td>用戶名：</td>
 43             <td><input type="text" id="st1"></td>
 44         </tr>
 45         <tr>
 46             <td>聯繫電話：</td>
 47             <td><input type="text" id="st2"></td>
 48         </tr>
 49         <tr>
 50             <td>密碼：</td>
 51             <td><input type="password"  id="st3"></td>
 52         </tr>
 53         <tr>
 54             <td>確認密碼：</td>
 55             <td><input type="password" id="st4" onblur="check()"></td>
 56         </tr>
 57         <tr>
 58             <td>性別：</td>
 59             <td style="text-align: left;">
 60              <!-- 這裏name必須相同 -->
 61                 <input type="radio" name="sex" id="sex1">男  62                 <input type="radio" name="sex" id="sex2"> 女  63             </td>
 64         </tr>
 65         <tr>
 66             <td>學歷：</td>
 67             <td>
 68                 <select id="select">
 69                     <option value="高中">高中</option>
 70                     <option value="大專">大專</option>
 71                       <option value="本科">本科</option>
 72                       <option value="本科以上">本科以上</option>
 73                 </select>
 74             </td>
 75         </tr>
 76         <tr>
 77             <td colspan="2">
 78                 <input type="submit" id="btn1" onclick="cs()">
 79                 <input type="reset" id="btn2" value="重置">
 80             </td>
 81         </tr>
 82     </table>
 83     <script type="text/javascript">
 84         //自定義經過ID獲取元素的函數
 85         function $(id){  86             return document.getElementById(id)  87  }  88 
 89         function check(){  90             var boo=$('st3').value==$('st4').value;  91             if (boo) {  92                 return true;  93  }else{  94  alert('兩次密碼不一致')  95  }  96 
 97  }  98 
 99         function cs(){ 100             var str=''; 101  str+="\n用戶名："; 102  str+=$('st1').value 103  str+="\n聯繫電話："
104  str+=$('st2').value; 105  str+='\n性別：'; 106  str+=$('sex1').checked?'男':'女'; 107  str+='\n 學歷：'; 108  str+=$('select').value 109  alert('用戶信息：\n'+str) 110  } 111     </script>
112 </body>
113 </html>