JavaScript常規性表單判斷實例_表單按鈕特效

一個項目很全的JavaScript表單判斷實例，包括判斷文本框是否是空、判斷輸入的是否是數字、輸入的是否是字符，以及判斷Email，判斷字符長度，判斷復選框是否選中等，如果不想挑選出某一功能的話，你可以直接復制保存下來，方便面以后使用。

if (theForm.info1.value == "")
  {
    alert("請在 \"用戶名\" 域中輸入值。");
    theForm.info1.focus();
    return (false);
  }

if (theForm.info1.value.length < 1)
  {
    alert("在 \"用戶名\" 域中，請至少輸入 1 個字符。");
    theForm.info1.focus();
    return (false);
  }

if (theForm.info1.value.length > 10)
  {
    alert("在 \"用戶名\" 域中，請最多輸入 10 個字符。");
    theForm.info1.focus();
    return (false);
  }

if (theForm.info7.value == "")
  {
    alert("請在 \"出生年\" 域中輸入值。");
    theForm.info7.focus();
    return (false);
  }

if (theForm.info7.value.length < 4)
  {
    alert("在 \"出生年\" 域中，請至少輸入 4 個字符。");
    theForm.info7.focus();
    return (false);
  }

if (theForm.info7.value.length > 4)
  {
    alert("在 \"出生年\" 域中，請最多輸入 4 個字符。");
    theForm.info7.focus();
    return (false);
  }

if (decPoints > 1)
  {
    alert("請在 info7 域中輸入一個有效數字。");
    theForm.info7.focus();
    return (false);
  }

var chkVal = allNum;
  var prsVal = parseFloat(allNum);
  if (chkVal != ""  &&  !(prsVal >= "1940"  &&  prsVal <= "2000"))
  {
    alert("請在 \"出生年\" 域中輸入值 大于或等于 1940 與 小于或等于 2000。");
    theForm.info7.focus();
    return (false);
  }

if (theForm.info8.value == "")
  {
    alert("請在 \"出生月份\" 域中輸入值。");
    theForm.info8.focus();
    return (false);
  }

if (theForm.info8.value.length < 1)
  {
    alert("在 \"出生月份\" 域中，請至少輸入 1 個字符。");
    theForm.info8.focus();
    return (false);
  }

if (theForm.info8.value.length > 2)
  {
    alert("在 \"出生月份\" 域中，請最多輸入 2 個字符。");
    theForm.info8.focus();
    return (false);
  }

if (decPoints > 1)
  {
    alert("請在 info8 域中輸入一個有效數字。");
    theForm.info8.focus();
    return (false);
  }

var chkVal = allNum;
  var prsVal = parseFloat(allNum);
  if (chkVal != ""  &&  !(prsVal >= "1"  &&  prsVal <= "12"))
  {
    alert("請在 \"出生月份\" 域中輸入值 大于或等于 1 與 小于或等于 12。");
    theForm.info8.focus();
    return (false);
  }

if (theForm.info9.value == "")
  {
    alert("請在 \"出生日期\" 域中輸入值。");
    theForm.info9.focus();
    return (false);
  }

if (theForm.info9.value.length < 1)
  {
    alert("在 \"出生日期\" 域中，請至少輸入 1 個字符。");
    theForm.info9.focus();
    return (false);
  }

if (theForm.info9.value.length > 2)
  {
    alert("在 \"出生日期\" 域中，請最多輸入 2 個字符。");
    theForm.info9.focus();
    return (false);
  }

var chkVal = allNum;
  var prsVal = parseInt(allNum);
  if (chkVal != ""  &&  !(prsVal >= "1"  &&  prsVal <= "31"))
  {
    alert("請在 \"出生日期\" 域中輸入值 大于或等于 1 與 小于或等于 31。");
    theForm.info9.focus();
    return (false);
  }

if (theForm.info15.value == "")
  {
    alert("請在 \"身份證件號碼\" 域中輸入值。");
    theForm.info15.focus();
    return (false);
  }

if (theForm.info15.value.length < 10)
  {
    alert("在 \"身份證件號碼\" 域中，請至少輸入 10 個字符。");
    theForm.info15.focus();
    return (false);
  }

if (theForm.info15.value.length > 30)
  {
    alert("在 \"身份證件號碼\" 域中，請最多輸入 30 個字符。");
    theForm.info15.focus();
    return (false);
  }

if (decPoints > 1)
  {
    alert("請在 info15 域中輸入一個有效數字。");
    theForm.info15.focus();
    return (false);
  }

if (theForm.info18.value == "")
  {
    alert("請在 \"郵政編碼\" 域中輸入值。");
    theForm.info18.focus();
    return (false);
  }

if (theForm.info18.value.length < 6)
  {
    alert("在 \"郵政編碼\" 域中，請至少輸入 6 個字符。");
    theForm.info18.focus();
    return (false);
  }

if (theForm.info18.value.length > 6)
  {
    alert("在 \"郵政編碼\" 域中，請最多輸入 6 個字符。");
    theForm.info18.focus();
    return (false);
  }

if (decPoints > 1)
  {
    alert("請在 info18 域中輸入一個有效數字。");
    theForm.info18.focus();
    return (false);
  }
  return (true);
}
//--></script>
<form method="POST" action="reg.asp" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1">       
          <table border="1" cellPadding="2" cellSpacing="0" align="left"  class="itm" width=500>
            <tr bgcolor="#E3E3E3"> 
              <td colspan="3">請填寫下述注冊內容，注意：標有<font color="red" size="+2">*</font>的必須填寫。</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">用戶名</div>
              </td>
              <td bgcolor="#FEE3A7" width="228">
                <input name="info1" size="20" maxlength="10" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">英文字符，<font color="#FF0000">最長10位</font></td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">口令</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="password" name="info2" size="20" maxlength="16" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">英文字符和數字，最長16位</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">確認口令</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="password" name="info3" size="20" maxlength="16" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">請與您的口令保持一致</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">電子郵件</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info4" maxlength="50" value size="20">
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">最重要的聯系方式</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">姓名</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info5" size="20" maxlength="50" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">請輸入您的真實姓名，這是您的重要信息</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">性別</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info6" size="1">
                  <option value="NULL">---請選擇--- 
                  <option value="男">男 
                  <option value="女">女
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">生日</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info7" size="4" maxlength="4" value>
                年
                <input type="text" name="info8" size="2" maxlength="2" value>
                月
                <input type="text" name="info9" size="2" maxlength="2" value>
                日<font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">生日確認您身份的重要信息之一，在您過生日時，您將收到本站的一份精美生日禮品。</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">省份</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info10" size="1">
                  <option value="NULL">---請選擇--- 
                  <option value="湖南-吉首">湖南-吉首 
                  <option value="湖南-龍山">湖南-龍山 
                  <option value="湖南-花垣">湖南-花垣 
                  <option value="湖南-鳳凰">湖南-鳳凰 
                  <option value="湖南-保靖">湖南-保靖 
                  <option value="湖南-古丈">湖南-古丈 
                  <option value="湖南-瀘溪">湖南-瀘溪 
                  <option value="湖南-永順">湖南-永順 
                  <option value="湖南-長沙">湖南-長沙 
                  <option value="湖南-株洲">湖南-株洲 
                  <option value="湖南-湘潭">湖南-湘潭 
                  <option value="湖南-常德">湖南-常德 
                  <option value="湖南-衡陽">湖南-衡陽 
                  <option value="湖南-岳陽">湖南-岳陽 
                  <option value="湖南-邵陽">湖南-邵陽 
                  <option value="湖南-益陽">湖南-益陽 
                  <option value="湖南-婁底">湖南-婁底 
                  <option value="湖南-懷化">湖南-懷化 
                  <option value="湖南-郴州">湖南-郴州 
                  <option value="湖南-永州">湖南-永州 
                  <option value="湖南-張家界">湖南-張家界 
                  <option value="北京">北京 
                  <option value="上海">上海 
                  <option value="天津">天津 
                  <option value="重慶">重慶 
                  <option value="黑龍江">黑龍江 
                  <option value="遼寧">遼寧 
                  <option value="吉林">吉林 
                  <option value="河北">河北 
                  <option value="內蒙古">內蒙古 
                  <option value="陜西">陜西 
                  <option value="山西">山西 
                  <option value="甘肅">甘肅 
                  <option value="寧夏">寧夏 
                  <option value="新疆">新疆 
                  <option value="西藏">西藏 
                  <option value="青海">青海 
                  <option value="四川">四川 
                  <option value="云南">云南 
                  <option value="貴州">貴州 
                  <option value="湖北">湖北 
                  <option value="河南">河南 
                  <option value="山東">山東 
                  <option value="安徽">安徽 
                  <option value="江蘇">江蘇 
                  <option value="浙江">浙江 
                  <option value="廣東">廣東 
                  <option value="廣西">廣西 
                  <option value="江西">江西 
                  <option value="福建">福建 
                  <option value="海南">海南 
                  <option value="臺灣">臺灣 
                  <option value="香港">香港 
                  <option value="澳門">澳門 
                  <option value="其它國家" Country>其它國家 
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">其他國家的用戶選擇“其他國家”</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">婚姻狀況</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info11" size="1">
                  <option value="NULL">---請選擇---</option>
                  <option value="否">未婚 
                  <option value="是">已婚
                </select>
              </td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">教育情況</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info12" size="1">
                  <option value="NULL">---請選擇--- 
                  <option value="初中以下">初中以下 
                  <option value="高中/中專/技校">高中/中專/技校 
                  <option value="大學/大專">大學/大專 
                  <option value="碩士以上">碩士以上
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">職業</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info13" size="1">
                  <option value="NULL">---請選擇--- 
                  <option value="黨政企事業單位">黨政企事業單位 
                  <option value="金融（銀行、工商、稅務、保險）">金融（銀行、工商、稅務、保險） 
                  <option value="文藝、影視、娛樂、體育">文藝、影視、娛樂、體育 
                  <option value="服務業">服務業 
                  <option value="醫護人員">醫護人員 
                  <option value="新聞、媒體">新聞、媒體 
                  <option value="軍人、公檢法人員">軍人、公檢法人員 
                  <option value="計算機及通信相關行業">計算機及通信相關行業 
                  <option value="其它專業技術人員">其它專業技術人員 
                  <option value="教師">教師 
                  <option value="學生">學生 
                  <option value="外資、合資企業人員">外資、合資企業人員 
                  <option value="工人">工人 
                  <option value="農民">農民 
                  <option value="個體經營者">個體經營者 
                  <option value="其他">其他
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">個人月收入</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info14" size="1">
                  <option value="NULL">---請選擇--- 
                  <option value="500">500以下</option>
                  <option value="1000">500-1000 
                  <option value="1001">1001-3000 
                  <option value="3001">3001以上 
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">身份證件號碼</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info15" maxlength="30" size="30" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#EFF8E6" width="178">也可以填寫任何能夠證明您身份的證件號碼，在多數有獎活動中都需要</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">興趣愛好</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <select name="info16" size="1">
                  <option value="NULL">---請選擇---</option>
                  <option value="體育運動">體育運動 
                  <option value="藝術">藝術 
                  <option value="娛樂休閑">娛樂休閑 
                  <option value="家庭生活">家庭生活 
                  <option value="健康">健康 
                  <option value="音樂">音樂 
                  <option value="購物">購物 
                </select>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178"> </td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">通信地址</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info17" maxlength="60" size="30" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">以便進行有獎活動時郵寄獎品</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">郵政編碼</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info18" maxlength="6" size="10" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">　</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">電話</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info19" maxlength="15" size="15" value>
                <font color="red" size="+2">*</font></td>
              <td bgcolor="#FFF8E6" width="178">以便聯系</td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">您的個人主頁</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info20" size="33" maxlength="50" value="http://">
              </td>
              <td bgcolor="#FFF8E6" width="178"></td>
            </tr>
            <tr> 
              <td align="right" width="68" bgcolor="#FFCE63"> 
                <div align="left">OICQ</div>
              </td>
              <td bgcolor="#FEE3A7" width="228"> 
                <input type="text" name="info21" maxlength="15" size="15" value>
              </td>
              <td bgcolor="#FFF8E6" width="178">　</td>
            </tr>
            <tr bgcolor="#E3E3E3"> 
              <td colspan="3" align="center">
                <input type="submit" value="注 冊" id="submit1" name="submit1">
                   
                <input type="reSet" value="清 除" id="reSet1" name="reSet1">
              </td>
            </tr>
          </table>
        </form>

所屬頻道：表單按鈕特效/更新時間：2013-04-17

[收藏][報錯][返回列表]

相關表單按鈕特效：

JavaScript常規性表單判斷實例_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些