javascript表單事件處理方法詳解

更新時間：2016年05月15日 17:29:21 作者：net小伙

這篇文章主要為大家詳細介紹了javascript表單事件處理方法，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript處理表單事件的常用方法，供大家參考，具體內(nèi)容如下

1、訪問表單對象的常用方法：

①：根據(jù)<form>元素的id屬性；

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

②：根據(jù)<form>元素的name屬性；

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

③：直接使用表單名訪問表單：

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

2、表單的常用事件：

①onsubmit事件：點擊“提交”按鈕的時候會觸發(fā)此事件，并且可能阻止表單提交。例：表單的驗證；

②onchange事件：當用戶更改內(nèi)容，并且文本框失去焦點的時候觸發(fā)此事件；

例：表單提交

前臺界面：

前臺界面的代碼：

<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>
          內(nèi) 容：
        </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("請在年齡選項中輸入數(shù)字！");
             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 = "";    //設(shè)置一個變量獲取性別的選項

         var content = myform.content; //獲取內(nèi)容
         var ocontent = ""; //設(shè)置一個變量獲取內(nèi)容的選項

         var eduleave = myform.edu_level;    //獲取學歷
         var oedu = ""; //設(shè)置一個變量獲取學歷的選項

         var intersent = myform.like;      //獲取表單愛好
         var olike = ""; //設(shè)置一個變量獲取愛好的選項

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

         for (var i = 0; i < content.length; i++) {   //內(nè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內(nèi)容為：" + 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>

這個案例只是一些常規(guī)的做法，不涉及什么技術(shù)，只是為了下次方便使用。

以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設(shè)計有所幫助。

您可能感興趣的文章: