表單檢核_方法2(全部check)

<h2>寄件資料輸入</h2>
<form
id="form1" method="post" action="result.php">
  <p>姓名:
      <input type="text" name="receiver"
id="receiver" />
  </p>
  <p>電話:
      <input type="text" name="phone"
id="phone" />
  </p>
  <p>確認:
      <input type="checkbox" name="sure"
id="sure" />
  </p>
  <p>
    <input type="submit" value="送出" />
  </p>
</form>

html語法

表單檢核_方法2(全部check)

document.getElementById('form1').onsubmit = function(){ return check_data(); };

function check_data()

{

   var flag = true;

   var message = ''; // 錯誤訊息

 

   // 檢查收件者 (不能為空白)

   var receiver = document.getElementById('receiver');

   if( receiver.value == '' )

   {

      flag = false;

      message += '收件者不能為空白\n';

   }

Javascript語法

表單檢核_方法2(全部check)

// 檢查電話號碼 (不能為空白)

   var phone = document.getElementById('phone');

   if( phone.value=='' )

   {

      flag = false;

      message += '電話號碼有誤\n';

   }

   // 確認欄必須打勾

   var sure = document.getElementById('sure');

   if(!sure.checked)

   {

      flag = false;

      message += '確認欄必須打勾\n';

   }

Javascript語法

表單檢核_方法2(全部check)


   
   // 總結處理
   if(!flag)
   {
      alert(message);
   }
   
   return flag;
}

Javascript語法

Javascript學習_Class5_20201216_t3

By vanessa168

Javascript學習_Class5_20201216_t3

前端表單檢查(全部檢查)

  • 45