表单实例（判断两次密码是否一致）

时间 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>

css部分：css

一、第七行，仍是元素在style中定义格式的问题，好比table{}，直接就是元素加大括号，而后里面就是属性html

二、第八行，margin来实现表格在页面中自动居中java

三、第16行，backgound属性函数

四、第25行，伪类选择器，直接指定type为radio的格式，这样直接指定type的话，是中括号包起来的[type=radio]学习

五、第28行，若是是多个，中间中逗号隔开spa

六、第34行，td的first-child，td的第一个孩子code

七、第51行，元素的id属性在js中很是有用htm

八、第55行，实现判断两次密码是否一致，是调用了js函数的blog

九、第59行，调用了yext-align属性的

十、第61行，单选框radio的name必须一致，当时id通常不一样

十一、第77行，合并列，是在td里面而不是tr，用的是colspan属性

十二、第55行，onblur属性来判断两次密码是否一致

js部分：

一、第85行，function $(id){} 自定义经过id获取元素的函数

二、第86行，去弄清楚document有哪些属性以后，学起来会事半功倍

三、第90行，密码不一致的函数判断，只用判断两个的值是否相等便可，注意用了刚刚获取id的函数

四、第106行，checked属性，

五、第108行，value属性

4、总结

案例要点：

综合运用学过的知识，将HTML于JS相结合。