【JAVASCRIPT】处理表单事件

最新推荐文章于 2024-11-18 12:10:44 发布

weixin_34320724

最新推荐文章于 2024-11-18 12:10:44 发布

阅读量98

点赞数

文章标签： javascript ViewUI

访问表单对象的常用方法：

　　①：根据<form>元素的id属性；

　　　　var myform=document.getElementById("myformid"); //myformid是某个<form>元素的ID；

　　②：根据<form>元素的name属性；

　　　　var myform=document.forms["myformname"]; 　　//myformname是某个<form>元素的名称；

　　③：直接使用表单名访问表单：

　　　　var myform=document.myformname;　　　　//myformname是某个<form>元素的名称；

表单的常用事件：

　　 ①：onsubmit事件：点击“提交”按钮的时候会触发此事件，并且可能阻止表单提交。例：表单的验证；

　　②：onchange事件：当用户更改内容，并且文本框失去焦点的时候触发此事件；

例：表单提交

　　前台界面：

前台界面的代码：

View Code

  1 <form name="myform" action="javascript:alert('注册成功！');" method="post" onsubmit="return yanzheng();">
  2     <table width="500px">
  3         
  4         <tbody>
  5             <tr>
  6                 <td>
  7                     用户名：
  8                 </td>
  9                 <td>
 10                     <input name="username" id="username" type="text" />
 11                 </td>
 12                 <td align="left">
 13                     <p style="color: #FF0000">*用户名长度在6-10之间</p>
 14                 </td>
 15             </tr>
 16             <tr>
 17                 <td>
 18                     密 码：
 19                 </td>
 20                 <td>
 21                     <input id="password" onchange="passwordleave()" type="password" />
 22                 </td>
 23                 <td align="left">
 24                     <p style="color: #FF0000">*
 25                     <input id="Button1" type="button" value="弱" style="background-color: #FF0000" />
 26                     <input id="Button2" type="button" value="中" style="background-color: #FF0000" />
 27                     <input id="Button3" type="button" value="强" style="background-color: #FF0000" />
 28                     <label id="lavel"></label>
 29                     </p>
 30                     </td>
 31             </tr>
 32             <tr>
 33                 <td>
 34                     年 龄：
 35                 </td>
 36                 <td>
 37                     <input id="age" type="text" />
 38                 </td>
 39                 <td align="left">
 40                     <p style="color: #FF0000">*</p>
 41                 </td>
 42             </tr>
 43             <tr>
 44                 <td>
 45                     性 别：
 46                 </td>
 47                 <td>
 48                     <input name="sex" type="radio" value="男" checked="checked" />男
 49                     <input name="sex" type="radio" value="女"/>女
 50                 </td>
 51                 <td align="left">
 52                     <p style="color: #FF0000">*</p>
 53                 </td>
 54             </tr>
 55             <tr>
 56                 <td>
 57                     内 容：
 58                 </td>
 59                 <td>
 60                     <input type="checkbox" name="content" value="新闻" />新闻
 61                     <input type="checkbox" name="content" value="娱乐" />娱乐
 62                     <input type="checkbox" name="content" value="教育" />教育
 63                 </td>
 64                 <td align="left">
 65                     <p style="color: #FF0000">*</p>
 66                 </td>
 67             </tr>
 68             <tr>
 69                 <td>
 70                     学 历：
 71                 </td>
 72                 <td>
 73                     <select name="edu_level" style="width: 74px">
 74                         <option value="1">小学</option>
 75                         <option value="2">中学</option>
 76                         <option value="3">大学</option>
 77                         <option value="4">大学以上</option>
 78                     </select>
 79                 </td>
 80                 <td align="left">
 81                     <p style="color: #FF0000">*</p>
 82                 </td>
 83             </tr>
 84             <tr>
 85                 <td>
 86                     爱 好：
 87                 </td>
 88                 <td>
 89                     <select name="like" size="6" multiple="multiple" 
 90                         style="width: 72px; height: 108px">
 91                         <option value="1">篮球</option>
 92                         <option value="2">足球</option>
 93                         <option value="3">排球</option>
 94                         <option value="4">跑步</option>
 95                         <option value="5">登山</option>
 96                         <option value="6">健美</option>
 97                     </select>
 98                 </td>
 99                 <td align="left">
100                     <p style="color: #FF0000">*</p>
101                 </td>
102             </tr>
103             <tr>
104                 <td>
105                     
106                     <input id="Button4" type="button" onclick="checkinfo()" value="查看信息" /></td>
107                 <td>
108                     <input type="submit" name="tijiao" value="注册" />
109                 </td>
110                 <td>
111                     <input type="reset" name="reset" value="重置" />
112                 </td>
113             </tr>
114         </tbody>
115     </table>
116     </form>

JS脚本：

  1          <script type="text/javascript">    
  2              function yanzheng() {
  3                  var b;
  4                  var a = document.getElementById("username"); //获取用户名值
  5                  var p = document.getElementById("password");   //获取密码值
  6                  var age = myform.age.value;   //获取年龄值
  7 
  8                  if (a.value.length < 5 || a.value.length > 10) {
  9                      alert("您输入的用户名格式错误！");
 10                      return false;
 11                  }
 12                  else if (p.value.length < 5) {
 13                      alert("密码长度少于5！");
 14                      return false;
 15                  }
 16                  else if (!checkage(age)) {
 17                      return false;
 18                  }
 19                  else {
 20                      return true;
 21                  }
 22 
 23              }
 24 
 25              function checkage(a) {         //检测年龄
 26                  var ch, age;
 27                  for (var i = 0; i < a.length; i++) {
 28                      ch = a.charAt(i);
 29                      if (ch < "0" || ch > "9") {
 30                          alert("请在年龄选项中输入数字！");
 31                          return false;
 32                      }
 33                  }
 34                  age = parseInt(a);
 35                  if (age < 10 || age > 100) {
 36                      alert("年龄不真实！");
 37                      return false;
 38                  }
 39                  return true;
 40 
 41              }
 42 
 43              function checkinfo() {             //显示所有的信息
 44                  var username = myform.username.value;  //获取用户名
 45                  var password = myform.password.value;  //获取密码
 46                  var age = myform.age.value;        //获取年龄
 47 
 48                  var sex = myform.sex;      //获取性别
 49                  var osex = "";       //设置一个变量获取性别的选项
 50 
 51                  var content = myform.content;  //获取内容
 52                  var ocontent = "";  //设置一个变量获取内容的选项
 53 
 54                  var eduleave = myform.edu_level;       //获取学历
 55                  var oedu = "";  //设置一个变量获取学历的选项
 56 
 57                  var intersent = myform.like;           //获取表单爱好
 58                  var olike = "";  //设置一个变量获取爱好的选项
 59 
 60                  for (var i = 0; i < sex.length; i++) {         //性别
 61                      if (sex[i].checked) {
 62                          osex = sex[i].value;
 63                      }
 64                  }
 65 
 66                  for (var i = 0; i < content.length; i++) {     //内容
 67                      if (content[i].checked) {
 68                          ocontent += content[i].value + " ";
 69                      }
 70                  }
 71 
 72                  for (var i = 0; i < eduleave.length; i++) {    //学历
 73                      if (eduleave.selectedIndex >= 0) {
 74                          oedu = eduleave.options[eduleave.selectedIndex].text;
 75                      }
 76                  }
 77 
 78                  for (var i = 0; i < intersent.length; i++) {       //爱好
 79                      if (intersent.options[i].selected) {
 80                          olike += intersent.options[i].text + " ";
 81                      }
 82                  }
 83 
 84                  alert("您的用户名为：" + username + "\n密码为：" + password + "\n年龄为：" + age + "\n性别为：" + osex + "\n内容为：" + ocontent + "\n学历为：" + oedu + "\n兴趣爱好为：" + olike);
 85 
 86              }
 87 
 88 
 89              function passwordleave() {
 90                  var passwordleavel = myform.password.value;
 91                  if (passwordleavel.length == "") {
 92                      document.getElementById("Button1").style.display = "none";
 93                      document.getElementById("Button2").style.display = "none";
 94                      document.getElementById("Button3").style.display = "none";
 95                  }
 96                  else {
 97                      if (passwordleavel.length <= "5") {
 98                          document.getElementById("Button1").style.display = "";
 99                          document.getElementById("Button2").style.display = "none";
100                          document.getElementById("Button3").style.display = "none";
101                      }
102                      else if (passwordleavel.length <= "10") {
103                          document.getElementById("Button1").style.display = "";
104                          document.getElementById("Button2").style.display = "";
105                          document.getElementById("Button3").style.display = "none";
106                      }
107                      else {
108                          document.getElementById("Button1").style.display = "";
109                          document.getElementById("Button2").style.display = "";
110                          document.getElementById("Button3").style.display = "";
111                      }
112                  }
113              }
114 
115              function startbody() {
116                  document.getElementById("Button1").style.display = "none";
117                  document.getElementById("Button2").style.display = "none";
118                  document.getElementById("Button3").style.display = "none";
119              }
120 
121          </script>