当前位置: 绿色php资源 > js特效 > jquery >

jq调查验证支持ff多种验证方式

时间:2010-04-26 19:00 作者:特效 点击:
jq调查验证支持ff多种验证方式!多种验证方式!不多说看案例。

  

jq调查验证支持ff多种验证方式

 转载保留:来源于http://www.phpzy.com

  1.  <form name="myform" method = "post" id="myform" action="diaocha.html" onsubmit="return checkForm('add');"> 
  2.             <input type="hidden" name="opt" value="add"/> 
  3.                 <div class="formbox"> 
  4.                     <ul> 
  5.                         <li><strong>1、您的性别是:</strong> 
  6.  
  7.                             <p> 
  8.                                 <label> 
  9.                                     <input type="radio" name="xingbie" value="男" id="xingbie"> 
  10.                                     男</label> 
  11.                                 <label> 
  12.                                     <input type="radio" name="xingbie" value="女" id="xingbie"> 
  13.                                     女</label> 
  14.                             </p> 
  15.  
  16.                         </li> 
  17.                         <li> <strong>2、您的年龄范围是:</strong> 
  18.                             <p> 
  19.                                 <label> 
  20.                                     <input type="radio"  name="nianling" value="18岁以下" id="nianling"> 
  21.                                     18岁以下</label> 
  22.                                 <label> 
  23.  
  24.                                     <input type="radio" name="nianling" value="18-25岁" id="nianling"> 
  25.                                     18-25岁</label> 
  26.                                 <label> 
  27.                                     <input type="radio" name="nianling" value="26-30岁" id="nianling"> 
  28.                                     26-30岁</label> 
  29.                                 <label> 
  30.                                     <input type="radio" name="nianling" value="31-40岁" id="nianling"> 
  31.                                     31-40岁</label> 
  32.  
  33.                                 <label> 
  34.                                     <input type="radio" name="nianling" value="40岁以上" id="nianling"> 
  35.                                     40岁以上</label> 
  36.                             </p> 
  37.                         </li> 
  38.                         <li> <strong>3、您的月收入约为:</strong> 
  39.                             <p> 
  40.  
  41.                                 <label> 
  42.                                     <input type="radio"  name="shouru" value="1000以下" id="shouru"> 
  43.                                     1000以下</label> 
  44.                                 <label> 
  45.                                     <input type="radio" name="shouru" value="1000-3000" id="shouru"> 
  46.                                     1000-3000</label> 
  47.                                 <label> 
  48.                                     <input type="radio" name="shouru" value="3000-5000" id="shouru"> 
  49.  
  50.                                     3000-5000</label> 
  51.                                 <label> 
  52.                                     <input type="radio" name="shouru" value="5000以上" id="shouru"> 
  53.                                     5000以上</label> 
  54.                             </p> 
  55.                         </li> 
  56.                         <li> <strong>4、您常去的城市有:(请输入)</strong> 
  57.  
  58.                             <p> 
  59.                                 <input name="chengshi" id="chengshi" type="text" class="ftxt"/> 
  60.                             </p> 
  61.                         </li> 
  62.                         <li> <strong>5、您所从事的职业是:</strong> 
  63.                             <p> 
  64.                                 <label> 
  65.                                     <input type="radio"  name="zhiye" value="学生" id="zhiye"> 
  66.  
  67.                                     学生</label> 
  68.                                 <label> 
  69.                                     <input type="radio" name="zhiye" value="IT行业" id="zhiye"> 
  70.                                     IT行业</label> 
  71.                                 <label> 
  72.                                     <input type="radio" name="zhiye" value="服务业" id="zhiye"> 
  73.                                     服务业</label> 
  74.  
  75.                                 <label> 
  76.                                     <input type="radio" name="zhiye" value="金融保险" id="zhiye"> 
  77.                                     金融保险</label> 
  78.                                 <label> 
  79.                                     <input type="radio" name="zhiye" value="法律咨询" id="zhiye"> 
  80.                                     法律咨询</label> 
  81.                                 <label> 
  82.                                     <input type="radio" name="zhiye" value="人事行政" id="zhiye"> 
  83.  
  84.                                     人事行政</label> 
  85.                                 <label> 
  86.                                     <input type="radio" name="zhiye" value="生物制药" id="zhiye"> 
  87.                                     生物制药</label> 
  88.                                 <label> 
  89.                                     <input type="radio" name="zhiye" value="建筑房产" id="zhiye"> 
  90.                                     建筑房产</label> 
  91.  
  92.                                 <label> 
  93.                                     <input type="radio" name="zhiye" value="教育行业" id="zhiye"> 
  94.                                     教育行业</label> 
  95.                                 <label> 
  96.                                     <input type="radio" name="zhiye" value="公务员" id="zhiye"> 
  97.                                     公务员</label> 
  98.                                 <label> 
  99.                                     <input type="radio" name="zhiye" value="个体户" id="zhiye"> 
  100.  
  101.                                     个体户</label> 
  102.                                 <label><input type="radio" name="zhiye" value="其他" id="zhiye"> 
  103.                                     其他</label> 
  104.                             </p> 
  105.                         </li> 
  106.                         <li> <strong>6、您经常去酒吧吗?</strong> 
  107.                             <p> 
  108.  
  109.                                 <label> 
  110.                                     <input type="radio"  name="jiuba" value="没去过" id="jiuba"> 
  111.                                     没去过</label> 
  112.                                 <label> 
  113.                                     <input type="radio" name="jiuba" value="偶尔去一次" id="jiuba"> 
  114.                                     偶尔去一次</label> 
  115.                                 <label> 
  116.                                     <input type="radio" name="jiuba" value="常去" id="jiuba"> 
  117.  
  118.                                     常去</label> 
  119.                                 <label> 
  120.                                     <input type="radio" name="jiuba" value="酒吧从业者" id="jiuba"> 
  121.                                     酒吧从业者</label> 
  122.                             </p> 
  123.                         </li> 
  124.                         <li> <strong>7、您对本站的界面整体感觉如何?</strong> 
  125.  
  126.                             <p> 
  127.                                 <label> 
  128.                                     <input type="radio" onclick="show_div()"  name="jiemian" value="好" id="jiemian"> 
  129.                                     好</label> 
  130.                                 <label> 
  131.                                     <input type="radio" onclick="show_div()" name="jiemian" value="一般" id="jiemian"> 
  132.                                     一般</label> 
  133.                                 <label> 
  134.  
  135.                                     <input type="radio" onclick="hide_div()"  name="jiemian" value="不好" id="jiemian"> 
  136.                                     不好</label> 
  137.                                 <label> 
  138.                                     <input type="radio" onclick="hide_div()" name="jiemian" value="很不好" id="jiemian"> 
  139.                                     很不好</label> 
  140.                             <div class="clear"></div> 
  141.                             <div id="starlist" style="display:none;">理由:<br /> 
  142.  
  143.                             <textarea name="jiemianliyou" id="jiemianliyou" cols="80" rows="4" class="ftar"></textarea> 
  144.                             <div> 
  145.                             </p> 
  146.                         </li> 
  147.                         <li> <strong>8、您比较喜欢本站哪些频道?(可多选)</strong> 
  148.                             <p> 
  149.                                 <label> 
  150.  
  151.                                     <input type="checkbox"  name="pingdao[]" value="夜店查询"> 
  152.                                     夜店查询</label> 
  153.                                 <label> 
  154.                                     <input type="checkbox" name="pingdao[]" value="夜店文化"> 
  155.                                     夜店文化</label> 
  156.                                 <label> 
  157.                                     <input type="checkbox" name="pingdao[]" value="DJ音乐"> 
  158.                                     DJ音乐</label> 
  159.  
  160.                                 <label> 
  161.                                     <input type="checkbox" name="pingdao[]" value="夜店招聘"> 
  162.                                     夜店招聘</label> 
  163.                                 <label> 
  164.                                     <input type="checkbox" name="pingdao[]" value="优惠活动"> 
  165.                                     优惠活动</label> 
  166.                                 <label> 
  167.                                     <input type="checkbox" name="pingdao[]" value="夜店吧"> 
  168.  
  169.                                     夜店吧</label><span class="hit" id='error_pingdao'>请至少选择一个频道!</span> 
  170.                             </p> 
  171.                         </li> 
  172.                         <li> <strong>9、您常使用以下哪些功能?(可多选)</strong> 
  173.                             <p> 
  174.                                 <label> 
  175.                                     <input type="checkbox" name="gongneng[]" value="搜索" id="gongneng[]"> 
  176.  
  177.                                     搜索</label> 
  178.                                 <label> 
  179.                                     <input type="checkbox" name="gongneng[]" value="点评" id="gongneng[]"> 
  180.                                     点评</label> 
  181.                                 <label> 
  182.                                     <input type="checkbox" name="gongneng[]" value="发帖" id="gongneng[]"> 
  183.                                     发帖</label> 
  184.  
  185.                                 <label> 
  186.                                     <input type="checkbox" name="gongneng[]" value="收藏夜店" id="gongneng[]"> 
  187.                                     收藏夜店</label> 
  188.                                 <label> 
  189.                                     <input type="checkbox" name="gongneng[]" value="收藏音乐" id="gongneng[]"> 
  190.                                     收藏音乐</label> 
  191.                                 <label> 
  192.                                     <input type="checkbox" name="gongneng[]" value="纠错" id="gongneng[]"> 
  193.  
  194.                                     纠错</label> 
  195.                                 <label> 
  196.                                     <input type="checkbox" name="gongneng[]" value="求职招聘" id="gongneng[]"> 
  197.                                     求职招聘</label> 
  198.                                 <label> 
  199.                                     <input type="checkbox" name="gongneng[]" value="供求信息" id="gongneng[]"> 
  200.                                     供求信息</label> 
  201.  
  202.                                 <label> 
  203.                                     <input type="checkbox" name="gongneng[]" value="上传音乐" id="gongneng[]"> 
  204.                                     上传音乐</label> 
  205.                                 <label> 
  206.                                     <input type="checkbox" name="gongneng[]" value="上传图片" id="gongneng[]"> 
  207.                                     上传图片</label><span class="hit" id='error_gongneng'>请至少选择一个功能!</span> 
  208.                             </p> 
  209.  
  210.                         </li> 
  211.                         <li> <strong>10、您希望我们增加那些栏目或内容?</strong> 
  212.                             <p> 
  213.                                 <textarea name="tianjiagongneng" cols="80" rows="4" class="ftar"></textarea> 
  214.                             </p> 
  215.                         </li> 
  216.                         <li> <strong>11、请您留下宝贵的意见或建议:</strong> 
  217.  
  218.                             <p> 
  219.                                 <textarea name="jianyi" cols="80" rows="4" class="ftar"></textarea> 
  220.                             </p> 
  221.                         </li> 
  222.                     </ul> 
  223.                 </div> 
  224.                 <div class="clear"></div> 
  225.                 <div class="contactbox"> 
  226.  
  227.                     <h4><span>请您准确填写联系方式,以便您获得奖品时本站好与您联系</span></h4> 
  228.                     <p>姓名:  
  229.                         <input name="xingming" id="xingming" type="text" class="ftxt"/> 
  230.                     </p> 
  231.                     <p>电话:  
  232.                         <input name="dianhua" id="dianhua" type="text" class="ftxt"/> 电话格式:区号+号码 或 手机号码  
  233.                     </p> 
  234.                     <p>电子信箱:  
  235.                         <input name="mail" type="text" class="ftxt"/>   
  236.                     </p> 
  237.  
  238.                     <p>地址:  
  239.                         <input name="sheng" id="sheng" type="text" class="ftxt ft100"/> 
  240.                         省  
  241.                         <input name="shi" id="shi" type="text" class="ftxt ft100"/> 
  242.                         市  
  243.                         <input name="qu" id="qu" type="text" class="ftxt ft100"/> 
  244.                         区(县)  
  245.                         <input name="dizhi" id="dizhi" type="text" class="ftxt"/> 
  246.                     </p> 
  247.                     <p>邮编:  
  248.                         <input name="youbian" type="text" class="ftxt"/> 
  249.  
  250.                     </p> 
  251.                 </div> 
  252.                 <div class="clear"></div> 
  253.                 <div id="fbtnbox"> 
  254.                     <input name="ok" type="hidden" value="ok" /> 
  255.                       
  256.                     <input type="submit" name="Submit" value="" class="fbtn" id="SUBMITBTN"> 
  257.                 </div> 
  258.                 <div id="dctxt"> 
  259.                     <p>本次活动一切解释权归去酒吧(798.com)所有</p> 
  260.  
  261.                 </div> 
  262.             </form> 
  263.  
  264. <script type='text/javascript'> 
  265. function   show_div(){    
  266.      var   obj_div=document.getElementById("starlist;    
  267.            obj_div.style.display=(obj_div.style.display=='none')?'none':'none';     
  268. }     
  269. function   hide_div(){  
  270.       var   obj_div=document.getElementById("starlist;    
  271.       obj_div.style.display=(obj_div.style.display=='block')?'block':'block';  
  272. }  
  273.  
  274. function len(str) {  
  275.     ///<summary>获得字符串实际长度,中文2,英文1</summary> 
  276.     ///<param name="str">要获得长度的字符串</param> 
  277.     var realLength = 0len = str.length, charCode = -1;  
  278.     for (var i = 0; i < len; i++) {  
  279.         charCode = str.charCodeAt(i);  
  280.         if (charCode >= 0 && charCode <= 128) realLength += 1;  
  281.         else realLength += 2;  
  282.     }  
  283.     return realLength;  
  284. };  
  285.  
  286. //判断  
  287. function checkForm(opt){  
  288. var xingbie = document.getElementsByName("xingbie;  
  289. var nianlingdocument.getElementsByName("nianling;  
  290. var shourudocument.getElementsByName("shouru;  
  291. var chengshi = $("#chengshi.val();  
  292. var zhiyedocument.getElementsByName("zhiye;  
  293. var jiubadocument.getElementsByName("jiuba;  
  294. var jiemiandocument.getElementsByName("jiemian;  
  295. var jiemianliyou = $("#jiemianliyou.val();  
  296. var pingdao = document.getElementsByName("pingdao[];  
  297. var gongneng = document.getElementsByName("gongneng[];  
  298. var xingming = $("#xingming.val();  
  299. var dianhua = $("#dianhua.val();  
  300. var sheng = $("#sheng.val();  
  301. var shi = $("#shi.val();  
  302. var qu = $("#qu.val();  
  303. var dizhi = $("#dizhi.val();  
  304.     var flag=true;  
  305.  
  306.  
  307.      n1=0;  
  308.      for(var i1=0;i1<xingbie.length;i1++)  
  309.      {  
  310.          if(xingbie[i1].checked==true)  
  311.             {  
  312.                n1n1 = n1+1;  
  313.                break;  
  314.             }  
  315.      }  
  316.       if(n1==0){  
  317.              alert("第一条:请选择性别!;  
  318.              return false;  
  319.       }  
  320.  
  321.      n2=0;  
  322.      for(var i2=0;i2<nianling.length;i2++)  
  323.      {  
  324.          if(nianling[i2].checked==true)  
  325.             {  
  326.                n2n2 = n2+1;  
  327.                break;  
  328.             }  
  329.      }  
  330.       if(n2==0){  
  331.              alert("第二条:请选择年龄!;  
  332.              return false;  
  333.       }  
  334.  
  335.      n3=0;  
  336.      for(var i3=0;i3<shouru.length;i3++)  
  337.      {  
  338.          if(shouru[i3].checked==true)  
  339.             {  
  340.                n3n3 = n3+1;  
  341.                break;  
  342.             }  
  343.      }  
  344.       if(n3==0){  
  345.              alert("第三条:请选择收入!;  
  346.              return false;  
  347.       }  
  348.  
  349.     if(chengshi=="{  
  350.              alert("第四条:常去的城市不能为空!;  
  351.              return false;  
  352.     }  
  353.  
  354.  
  355.      n4=0;  
  356.      for(var i4=0;i4<zhiye.length;i4++)  
  357.      {  
  358.          if(zhiye[i4].checked==true)  
  359.             {  
  360.                n4n4 = n4+1;  
  361.                break;  
  362.             }  
  363.      }  
  364.       if(n4==0){  
  365.              alert("第五条:请选择职业!;  
  366.              return false;  
  367.       }  
  368.  
  369.  
  370.      n5=0;  
  371.      for(var i5=0;i5<jiuba.length;i5++)  
  372.      {  
  373.          if(jiuba[i5].checked==true)  
  374.             {  
  375.                n5n5 = n5+1;  
  376.                break;  
  377.             }  
  378.      }  
  379.       if(n5==0){  
  380.              alert("第六条:您经常去酒吧还没选择!;  
  381.              return false;  
  382.       }  
  383.  
  384.      n6=0;  
  385.      for(var i6=0;i6<jiemian.length;i6++)  
  386.      {  
  387.          if(jiemian[i6].checked==true)  
  388.             {  
  389.                jiemianjiemianvalue = jiemian[i6].value;  
  390.                n6n6 = n6+1;  
  391.                break;  
  392.             }  
  393.      }  
  394.       if(n6==0){  
  395.              alert("第七条:您对本站的界面整体感觉如何还没选择!;  
  396.              return false;  
  397.       }  
  398.  
  399. if(jiemianvalue=="不好"||jiemianvalue=="很不好{  
  400.  
  401.     if(jiemianliyou=="{  
  402.              alert("第七条:您对本站的界面整体感觉理由还没写!;  
  403.              return false;  
  404.     }  
  405.  
  406. }  
  407.     if(opt == 'add'){  
  408.         var n=0;  
  409.         for(var i=0;i<pingdao.length;i++){  
  410.             if(pingdao[i].checked==true){  
  411.                 nn = n+1;  
  412.             }  
  413.         }  
  414.         if (n>0)  
  415.         {  
  416.             $("#error_pingdao.html(";  
  417.         }else{  
  418.          alert("至少选择一个频道;  
  419.             $("#error_pingdao.html("<b style='color:#cc3333;'>至少选择一个频道!</b>;  
  420.             $("#error_pingdao.show();  
  421.             flag = false;  
  422.             return false;  
  423.         }  
  424.  
  425.  
  426.         var ni=0;  
  427.         for(var ii=0;ii<gongneng.length;ii++){  
  428.             if(gongneng[ii].checked==true){  
  429.                 nini = ni+1;  
  430.             }  
  431.         }  
  432.         if (ni>0)  
  433.         {  
  434.             $("#error_gongneng.html(";  
  435.         }else{  
  436.             alert("至少选择一个功能;  
  437.             $("#error_gongneng.html("<b style='color:#cc3333;'>至少选择一个功能!</b>;  
  438.             $("#error_gongneng.show();  
  439.             flag = false;  
  440.             return false;  
  441.         }  
  442.  
  443.  
  444.     }  
  445.  
  446.  
  447.     if(xingming=="{  
  448.              alert("姓名不能为空!;  
  449.              return false;  
  450.     }  
  451.     if(dianhua=="{  
  452.              alert("电话不能为空!;  
  453.              return false;  
  454.     }  
  455.     if(sheng =="{  
  456.              alert("省不能为空!;  
  457.              return false;  
  458.     }  
  459.     if(shi =="{  
  460.              alert("市不能为空!;  
  461.              return false;  
  462.     }  
  463.     if(qu =="{  
  464.              alert("区不能为空!;  
  465.              return false;  
  466.     }  
  467.     if(dizhi =="{  
  468.              alert("区(县)后面要写详实地址!;  
  469.              return false;  
  470.     }  
  471.     if(flag){  
  472.     return true;  
  473. //      $("#myform.submit();  
  474.     }  
  475. }  
  476. </script> 

 


标签(Tag):jq调查 验证支持ff 多种验证方式 jq验证大全 jq单选验证 jq多选验证
------分隔线----------------------------
推荐内容
热点内容