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

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

①：根据

元素的id属性；

元素的ID；

②：根据元素的name属性；

元素的名称；

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

元素的名称；

2、表单的常用事件：

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

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

例：表单提交

前台界面：

前台界面的代码：

注册成功！');" method="post" onsubmit="return yanzheng();">

<tbody>
  <tr&gt;
    <td&gt;
      <a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>：
    </td&gt;
    <td&gt;
      <input name="username" id="username" type="text" />
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>长度在6-10之间</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      密 码：
    </td&gt;
    <td&gt;
      <input id="password" onchange="passwordleave()" type="password" />
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*
      <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"&gt;</label>
      </p>
      </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      年 龄：
    </td&gt;
    <td&gt;
      <input id="age" type="text" />
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      性 别：
    </td&gt;
    <td&gt;
      <input name="sex" type="radio" value="男" checked="checked" />男
      <input name="sex" type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>" value="女"/&gt;女
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      内 容：
    </td&gt;
    <td&gt;
      <input type="checkbox" name="content" value="新闻" />新闻
      <input type="checkbox" name="content" value="娱乐" />娱乐
      <input type="checkbox" name="content" value="教育" />教育
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      学 历：
    </td&gt;
    <td&gt;
      <select name="edu_level" style="width: 74px"&gt;
        <option value="1"&gt;小学</option>
        <option value="2"&gt;中学</option>
        <option value="3"&gt;大学</option>
        <option value="4"&gt;大学以上</option>
      </select>
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;
      爱 好：
    </td&gt;
    <td&gt;
      <select name="like" size="6" multiple="multiple" 
        style="width: 72px; height: 108px"&gt;
        <option value="1"&gt;篮球</option>
        <option value="2"&gt;足球</option>
        <option value="3"&gt;排球</option>
        <option value="4"&gt;跑步</option>
        <option value="5"&gt;登山</option>
        <option value="6"&gt;健美</option>
      </select>
    </td&gt;
    <td align="left"&gt;
      <p style="color: #FF0000"&gt;*</p>
    </td&gt;
  </tr&gt;
  <tr&gt;
    <td&gt;

      <input id="Button4" type="button" onclick="checkinfo()" value="查看信息" /></td&gt;
    <td&gt;
      <input type="submit" name="tijiao" value="注册" />
    </td&gt;
    <td&gt;
      <input type="reset" name="reset" value="重置" />
    </td&gt;
  </tr&gt;
</tbody>

</table>

JS脚本：

获取用户名值 var p = document.getElementById("password"); //获取密码值 var age = myform.age.value; //获取年龄值

     if (a.value.length < 5 || a.value.length > 10) {
       alert("您输入的<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>格式<a href="https://www.jb51.cc/tag/cuowu/" target="_blank" class="keywords">错误</a>！");
       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() {       //<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>所有的信息
     var username = myform.username.value; //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>
     var password = myform.password.value; //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>密码
     var age = myform.age.value;    //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>年龄

     var sex = myform.sex;   //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>性别
     var osex = "";    //设置一个变量<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>性别的选项

     var content = myform.content; //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>
     var ocontent = ""; //设置一个变量<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>的选项

     var eduleave = myform.edu_level;    //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>学历
     var oedu = ""; //设置一个变量<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>学历的选项

     var intersent = myform.like;      //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>表单爱好
     var olike = ""; //设置一个变量<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>爱好的选项

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

     for (var i = 0; i < content.length; i++) {   //<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>
       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("您的<a href="https://www.jb51.cc/tag/yonghuming/" target="_blank" class="keywords">用户名</a>为：" + username + "\n密码为：" + password + "\n年龄为：" + age + "\n性别为：" + osex + "\n<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>为：" + 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.f2er.com/js/48760.html

js 事件事件事件表单表单