1. 程式人生 > >html+javascript實現表單前臺驗證

html+javascript實現表單前臺驗證

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
      function onCheck()
      {
        if((form1.username==null||form1.username.value=="")&&(form1.password==null||form1.password.value==""))
       {
          alert("使用者名稱,密碼都不能為空");
          return false;
       }
       if(form1.username==null||form1.username.value=="")
       {
          alert("使用者名稱不能為空");
          return false;
       }
          if(form1.password==null||form1.password.value=="")
       {
          alert("密碼不能為空");
          return false;
       }
       else
       return true;
      }
    </script>
  </head>
  <body>
    <form name="form1" action="test.html" method="post">
      <table border="1" align="center">
      <tr>
        <td colspan="2" align="center">使用者登錄檔單</td>
      </tr>
        <tr>
         <td align="right">使用者名稱:</td>
         <td align="left"><input type="text" size="20" name="username"/>*</td>
        </tr>
        <tr>
         <td align="right">密&nbsp;&nbsp;碼:</td>
         <td align="left"><input type="password" size="20" name="password"/>*</td>
        </tr>
        <tr>
         <td align="right">性&nbsp;&nbsp;別:</td>
         <td align="left"><input type="radio" name="sex" value="男"/>男&nbsp;
         <input type="radio" name="sex" value="女"/>女
         </td>
        </tr>
        <tr>
         <td align="right">愛&nbsp;&nbsp;好:</td>
         <td align="left">
         <input type="checkbox"  name="favor" value="看書"/>看書
         <input type="checkbox"  name="favor" value="程式設計"/>程式設計
         <input type="checkbox"  name="favor" value="打球"/>打球
         </td>
        </tr>
        <tr>
        <td align="right">學習方向</td>
          <td><select name="direaction" multiple size="4">
            <option value="1">Android方向</option>
            <option value="2">IOS方向</option>
            <option value="3">Windows方向</option>
            <option value="4">Web方向</option>
          </select></td>
        </tr>
        <tr>
         <td colspan="2" align="center">
         <input type="submit" value="提交" onclick="return onCheck()"/>
         <input type="reset" value="取消"/>
         </td>
        </tr>
      </table>
    </form>
    
    
  </body>
</html>