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订阅特效代码搜索

表单按钮特效推荐

猜你也喜欢看这些