javascript表单事件处理方法详解

网络编程 2024/11/16 佚名

3 1 2

本文实例为大家分享了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程序设计有所帮助。

js,表单,事件

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“javascript表单事件处理方法详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

javascript表单事件处理方法详解

AngularJS学习笔记之依赖注入详解

基于jquery实现ajax无刷新评论

评论“javascript表单事件处理方法详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

javascript表单事件处理方法详解

AngularJS学习笔记之依赖注入详解

基于jquery实现ajax无刷新评论

评论“javascript表单事件处理方法详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存