用jQuery寫的最簡單的表單驗證

近幾天完成了關於我們項目的最簡單的表單驗證，是用jQuery寫的，由於之前也一直沒學過jQuery,所以自己也是一直處於邊摸索邊學習的階段，經過這一段時間的學習，通過查資料啥的，也發現了學習jQuery需要注意的地方，可能不准確只是自己的見解：1、在jQuery中 $()方法等價於jQuery()方法。括號里面可以是 css選擇器（標簽選擇器$('p')、類選擇器$('.myClass')、id選擇器$('#myId')，:first，:last，:parent ，:hidden，:visible，:odd，:even，:not('xxx')， ":eq(0)"（始於0)，:nth(n），:gt(0)，:lt(0)，:contains("xxx")）、Xpath或html元素，也就是通過上述目標匹配字符串。比如：$("a")構造的這個對象，是用CSS選擇器構建了一個jQuery對象——它選擇了所有的<a/>這個標簽。如：$("a").click(function(){...})  就是在點擊頁面上的任何一個鏈接時的觸發事件。確切地說，就是jQuery用<a/>這個標簽構建了一個對象$("a")，函數 click()是這個jQuery對象的一個（事件）方法。 注意，這里的對象是jQuery對象而不是DOM對象，jQuery對象無法使用DOM對象的任何方法，如果想用js中的方法，需要對其進行轉換，可以通過[index]的方法得到相應的DOM對象。可用get(0)的方法，如 

$('#myelement').get(0)，也可縮寫成$('#myelement')[0]

var $src = $("#sr");//jQuery對象
var cr     = $cr[0];//DOM對象

再比如：有如下這么一段HTML代碼

<p>one</p> 
<div> 
<p>two</p> 
</div> 
<p>three</p> 
<a href="#" id="test" onClick="jq()" >jQuery</a> 

而操作這段HTML的是如下一條語句： 
alert($("div>p").html());

$()中的是一個查詢表達式，也就是用“div>p”這樣一個查詢表達式構建了一個jQuery對象，然后的“html()”意思是顯示其html內容，也就是上面HTML代碼段的[two]。

再如： 
$("<div><p>Hello</p></div>").appendTo("body"); 
$()中的是一個字符串，用這樣一段字串構建了jQuery對象，然后向<body/>中添加這一字串。  

2、$()可以是$(element)，即一個特定的DOM元素。如常用的DOM對象有document、location、form等。如這樣一行代碼： 
$(document).find("div>p").html()); 
$()中的document是一個DOM元素，即在全文尋找帶<p>的<div>元素，並顯示<p>中的內容。 

3、$()可以是$(function)，即一個函數，它是$(document).ready()的一個速記方式。如常見的形式是這樣的：
$(document).ready(function(){ 
alert("Hello world!"); 
}); 
可變形作： 
$(function(){ 
alert("Hello world!"); 
}); 

最后附上表單驗證這一塊的代碼

$(function(){
    var $required = $("<span class='formtips onError'>必填項哦~</span>");
    var $format = $("<span class='formtips onError'>填正確格式呦~</span>");
    var $prev = $(this).parent().prev();
    var ok1=false,ok2=false,ok3=false,ok4=false,ok5=false,ok6=false,ok7=false,ok8=false,ok9=false,ok10=false;
    //驗證指導老師
    $("input[name='teacher']").focus(function(){
        $(this).parent().prev().children('.formtips').text('(指導教師名稱應該為2-10位之間)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var teacher=$(this).val().replace(/\s+/g,"");
         if(teacher!="" && teacher.length>=2 && $(this).val().length<=10){
             $(this).parent().prev().children('.formtips').text(' ');
             ok1=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(指導教師名稱應該為2-10位之間)').removeClass('state2').addClass('state1');
             ok1=false;
         }
     });
     //驗證工作室名稱
     $("input[name='name']").focus(function(){
         $(this).parent().prev().children('.formtips').text('(工作室名稱應該為1-10位之間)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var name=$(this).val().replace(/\s+/g,"");
        if(name!="" && $(this).val().length>=1 && name.length<=10){
            $(this).parent().prev().children('.formtips').text(' ');
            ok2=true;
        }
        else{
            $(this).parent().prev().children('.formtips').text('(工作室名稱應該為1-10位之間)').removeClass('state2').addClass('state1');

            ok2=false;
        }
     });

     //驗證工作室負責人
     $("input[name='principal']").focus(function(){
        $(this).parent().prev().children('.formtips').text('(工作室負責人名稱應該為1-10位之間)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var principal=$(this).val().replace(/\s+/g,"");
         if(principal!="" && principal.length>=1 && $(this).val().length<=10){
             $(this).parent().prev().children('.formtips').text(' ');
             ok3=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(工作室負責人名稱應該為1-10位之間)').removeClass('state2').addClass('state1');
             ok3=false;
         }
     });

     //驗證負責人聯系方式
     $("input[name='tel']").focus(function(){
        $(this).parent().prev().children('.formtips').text('(請按正確格式填寫手機號碼)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var tel=$(this).val().replace(/\s+/g,"");
         var filter1=/^1[3|4|5|7|8][0-9]\d{8}$/gi;
          if(tel.search(filter1)!=-1){
             $(this).parent().prev().children('.formtips').text(' ');
             ok4=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(請按正確格式填寫手機號碼)').removeClass('state2').addClass('state1');
             
             ok4=false;
         }
     });

     //驗證負責人QQ
      $("input[name='qq']").focus(function(){
        $(this).parent().prev().children('.formtips').text('(請按正確格式填寫負責人QQ)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var qq=$(this).val().replace(/\s+/g,"");
         var filter1=/\d{5,10}/gi;
        if(filter1.test(qq)){
             $(this).parent().prev().children('.formtips').text(' ');
             ok5=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(請按正確格式填寫負責人QQ)').removeClass('state2').addClass('state1');
             ok5=false;
         }
     });

     //驗證工作室地點
     $("input[name='place']").focus(function(){
        $(this).parent().prev().children('.formtips').text('(必填項)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var place=$(this).val().replace(/\s+/g,"");
        if(place!=""){
            var parent=
             $(this).parent().prev().children('.formtips').text(' ');
             ok6=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(必填項)').removeClass('state2').addClass('state1');
             ok6=false;
         }
     });
     //驗證工作室成立時間
     $("input[name='time']").focus(function(){
         $(this).parent().prev().children('.formtips').text('(請按"2015.01.12"格式填寫時間)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         var time=$(this).val().replace(/\s+/g,"");
         var pattern1=/\d{4}\.\d{2}\.\d{1,2}/gi;
         if(pattern1.test(time)){
             $(this).parent().prev().children('.formtips').text(' ');
             ok7=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(請按"2015.01.12"格式填寫時間)').removeClass('state2').addClass('state1');
             
             ok7=false;
         }

     });
     //驗證工作室方向
     var array=new Array();
     $(".input").focus(function(){
         $(this).parent().prev().children('.formtips').text('(請選擇至少一個方向)').addClass('state2').removeClass('.state1');
      }).blur(function(){
        //$("[name='checkbox']").attr("checked",'true');
        if($("[name='checkbox']:checked").length>=1){
           $(this).parent().prev().children('.formtips').text(' ');
            ok8=true;  
        }
        else{
            $(this).parent().prev().children('.formtips').text('(請選擇至少一個方向)').removeClass('state2').addClass('state1');

            ok8=false;
        }
     });
    $("[name='checkbox']").click(function(){
        array[array.length]=$(this).val();
        $(".input")[0].focus();
     });

     //驗證郵箱
     $("[name='email']").click(function(){
        $(this).parent().prev().children('.formtips').text('(請按正確格式填寫郵箱)').addClass('state2').removeClass('.state1');

     }).blur(function(){
          if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)!=-1){
              $(this).parent().prev().children('.formtips').text(' ');
              ok9=true;
          }
          else{
              $(this).parent().prev().children('.formtips').text('(請按正確格式填寫郵箱)').removeClass('state2').addClass('state1');
              ok9=false;
          }
     });
     //驗證工作室其他成員
     $("[name='other']").click(function(){
        $(this).parent().prev().children('.formtips').text('(成員名之間請用逗號隔開)').addClass('state2').removeClass('.state1');
     }).blur(function(){
         if($(this).val()!=""){
           $(this).parent().prev().text(' ');
           ok10=true;
         }
         else{
             $(this).parent().prev().children('.formtips').text('(成員名之間請用逗號隔開)').removeClass('state2').addClass('state1');
             ok10=false;
         }

         
     });
     //添加信息頁面提交按鈕
      $("input[name='Sub_Add']").click(function(){
        if(ok1 && ok2 && ok3 && ok4 && ok5 && ok6 && ok8 && ok10){
            alert("ok");
           // $('form').submit();
           $.ajax({
                  "type" :"POST",
                  "url"  :APP + "",
               "data" :{
                   
               },    
           });
        }else{
            return false;
        }
      });
      //修改工作室綜合信息提交按鈕
      $("input[name='Sub_Change']").click(function(){
         if(ok1 && ok2 && ok6 && ok7 && ok8){
             $.ajax({
                 "type" : "POST",
                 "url"  : APP + "",
                 "data" : {

                 },

             });
         }else{
             return false;
         }
      });

      //修改工作室成員信息提交按鈕
      $("input[name='Sub_Member']").click(function(){
         if(ok3 && ok4 && ok5 && ok9 && ok10){
             $.ajax({
                 "type" : "POST",
                 "url"  : APP + "",
                 "data" : {

                 },

             });
         }else{
             return false;
         }
      });

      //修改工作室文件驗證
      $("input[name='Add_File']").click(function(){
           //var file=$("#myfile").val();
           var pattern1=/(\.zip)$/gi;
         if($("#myfile").val().search(pattern1)==-1 && $("#myfile").val()!=""){
             alert("不符合文件格式要求,請選擇'.zip'文件");
         }
         else if($("#myfile").val()==""){
             alert("請選擇文件");
         }
         else{
             $.ajax({
               "type" : "POST",
                 "url"  : APP + "",
                 "data" : {

                 },

             });
         }
      });

      //納新情況
      $("#content").focus(function(){
           $(this).text(' ');
      });
      $("input[name='Feed_Sub']").click(function(){
         var content=$("#content").val().replace(/\s+/g,"");
         if(content==""){
             alert("請輸入反饋內容");
         }
         else{
             $.ajax({
               "type" : "POST",
                 "url"  : APP + "",
                 "data" : {

                 },

             });
         }
      });

})