javascript表单事件处理方法详解

前端之家收集整理的这篇文章主要介绍了javascript表单事件处理方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

①:根据

元素的id属性

元素的ID;

②:根据元素的name属性

元素的名称

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

元素的名称

2、表单的常用事件:

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

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

例:表单提交

前台界面:

前台界面的代码

注册成功!');" method="post" onsubmit="return yanzheng();"> <tbody> <tr&gt; <td&gt; <a href="/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="/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="/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="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>格式<a href="/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="/tag/xianshi/" target="_blank" class="keywords">显示</a>所有的信息
     var username = myform.username.value; //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a><a href="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>
     var password = myform.password.value; //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>密码
     var age = myform.age.value;    //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>年龄

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

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

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

     var intersent = myform.like;      //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>表单爱好
     var olike = ""; //设置一个变量<a href="/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="/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="/tag/yonghuming/" target="_blank" class="keywords">用户名</a>为:" + username + "\n密码为:" + password + "\n年龄为:" + age + "\n性别为:" + osex + "\n<a href="/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程序设计有所帮助。

猜你在找的JavaScript相关文章