javascript表单事件处理方法详解

前端技术 2023/09/09 JavaScript

本文实例为大家分享了javascript处理表单事件的常用方法，供大家参考，具体内容如下

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

①：根据<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>元素的名称；

2、表单的常用事件：

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

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

例：表单提交

前台界面：

前台界面的代码：

<form name=\"myform\" action=\"javascript:alert(\'注册成功！\');\" method=\"post\" onsubmit=\"return yanzheng();\">
  <table width=\"500px\">
    
    <tbody>
      <tr>
        <td>
          用户名：
        </td>
        <td>
          <input name=\"username\" id=\"username\" type=\"text\" />
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*用户名长度在6-10之间</p>
        </td>
      </tr>
      <tr>
        <td>
          密 码：
        </td>
        <td>
          <input id=\"password\" onchange=\"passwordleave()\" type=\"password\" />
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*
          <input id=\"Button1\" type=\"button\" value=\"弱\" style=\"background-color: #FF0000\" />
          <input id=\"Button2\" type=\"button\" value=\"中\" style=\"background-color: #FF0000\" />
          <input id=\"Button3\" type=\"button\" value=\"强\" style=\"background-color: #FF0000\" />
          <label id=\"lavel\"></label>
          </p>
          </td>
      </tr>
      <tr>
        <td>
          年 龄：
        </td>
        <td>
          <input id=\"age\" type=\"text\" />
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*</p>
        </td>
      </tr>
      <tr>
        <td>
          性 别：
        </td>
        <td>
          <input name=\"sex\" type=\"radio\" value=\"男\" checked=\"checked\" />男
          <input name=\"sex\" type=\"radio\" value=\"女\"/>女
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*</p>
        </td>
      </tr>
      <tr>
        <td>
          内 容：
        </td>
        <td>
          <input type=\"checkbox\" name=\"content\" value=\"新闻\" />新闻
          <input type=\"checkbox\" name=\"content\" value=\"娱乐\" />娱乐
          <input type=\"checkbox\" name=\"content\" value=\"教育\" />教育
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*</p>
        </td>
      </tr>
      <tr>
        <td>
          学 历：
        </td>
        <td>
          <select name=\"edu_level\" style=\"width: 74px\">
            <option value=\"1\">小学</option>
            <option value=\"2\">中学</option>
            <option value=\"3\">大学</option>
            <option value=\"4\">大学以上</option>
          </select>
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*</p>
        </td>
      </tr>
      <tr>
        <td>
          爱 好：
        </td>
        <td>
          <select name=\"like\" size=\"6\" multiple=\"multiple\" 
            style=\"width: 72px; height: 108px\">
            <option value=\"1\">篮球</option>
            <option value=\"2\">足球</option>
            <option value=\"3\">排球</option>
            <option value=\"4\">跑步</option>
            <option value=\"5\">登山</option>
            <option value=\"6\">健美</option>
          </select>
        </td>
        <td align=\"left\">
          <p style=\"color: #FF0000\">*</p>
        </td>
      </tr>
      <tr>
        <td>
          
          <input id=\"Button4\" type=\"button\" onclick=\"checkinfo()\" value=\"查看信息\" /></td>
        <td>
          <input type=\"submit\" name=\"tijiao\" value=\"注册\" />
        </td>
        <td>
          <input type=\"reset\" name=\"reset\" value=\"重置\" />
        </td>
      </tr>
    </tbody>
  </table>
  </form>

JS脚本：

<script type=\"text/javascript\">  
       function yanzheng() {
         var b;
         var a = document.getElementById(\"username\"); //获取用户名值
         var p = document.getElementById(\"password\");  //获取密码值
         var age = myform.age.value;  //获取年龄值

         if (a.value.length < 5 || a.value.length > 10) {
           alert(\"您输入的用户名格式错误！\");
           return false;
         }
         else if (p.value.length < 5) {
           alert(\"密码长度少于5！\");
           return false;
         }
         else if (!checkage(age)) {
           return false;
         }
         else {
           return true;
         }

       }

       function checkage(a) {     //检测年龄
         var ch, age;
         for (var i = 0; i < a.length; i++) {
           ch = a.charAt(i);
           if (ch < \"0\" || ch > \"9\") {
             alert(\"请在年龄选项中输入数字！\");
             return false;
           }
         }
         age = parseInt(a);
         if (age < 10 || age > 100) {
           alert(\"年龄不真实！\");
           return false;
         }
         return true;

       }

       function checkinfo() {       //显示所有的信息
         var username = myform.username.value; //获取用户名
         var password = myform.password.value; //获取密码
         var age = myform.age.value;    //获取年龄

         var sex = myform.sex;   //获取性别
         var osex = \"\";    //设置一个变量获取性别的选项

         var content = myform.content; //获取内容
         var ocontent = \"\"; //设置一个变量获取内容的选项

         var eduleave = myform.edu_level;    //获取学历
         var oedu = \"\"; //设置一个变量获取学历的选项

         var intersent = myform.like;      //获取表单爱好
         var olike = \"\"; //设置一个变量获取爱好的选项

         for (var i = 0; i < sex.length; i++) {     //性别
           if (sex[i].checked) {
             osex = sex[i].value;
           }
         }

         for (var i = 0; i < content.length; i++) {   //内容
           if (content[i].checked) {
             ocontent += content[i].value + \" \";
           }
         }

         for (var i = 0; i < eduleave.length; i++) {  //学历
           if (eduleave.selectedIndex >= 0) {
             oedu = eduleave.options[eduleave.selectedIndex].text;
           }
         }

         for (var i = 0; i < intersent.length; i++) {    //爱好
           if (intersent.options[i].selected) {
             olike += intersent.options[i].text + \" \";
           }
         }

         alert(\"您的用户名为：\" + username + \"\\n密码为：\" + password + \"\\n年龄为：\" + age + \"\\n性别为：\" + osex + \"\\n内容为：\" + ocontent + \"\\n学历为：\" + oedu + \"\\n兴趣爱好为：\" + olike);

       }


       function passwordleave() {
         var passwordleavel = myform.password.value;
         if (passwordleavel.length == \"\") {
           document.getElementById(\"Button1\").style.display = \"none\";
           document.getElementById(\"Button2\").style.display = \"none\";
           document.getElementById(\"Button3\").style.display = \"none\";
         }
         else {
           if (passwordleavel.length <= \"5\") {
             document.getElementById(\"Button1\").style.display = \"\";
             document.getElementById(\"Button2\").style.display = \"none\";
             document.getElementById(\"Button3\").style.display = \"none\";
           }
           else if (passwordleavel.length <= \"10\") {
             document.getElementById(\"Button1\").style.display = \"\";
             document.getElementById(\"Button2\").style.display = \"\";
             document.getElementById(\"Button3\").style.display = \"none\";
           }
           else {
             document.getElementById(\"Button1\").style.display = \"\";
             document.getElementById(\"Button2\").style.display = \"\";
             document.getElementById(\"Button3\").style.display = \"\";
           }
         }
       }

       function startbody() {
         document.getElementById(\"Button1\").style.display = \"none\";
         document.getElementById(\"Button2\").style.display = \"none\";
         document.getElementById(\"Button3\").style.display = \"none\";
       }

     </script>

这个案例只是一些常规的做法，不涉及什么技术，只是为了下次方便使用。

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24768

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案