用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" : {

                 },

             });
         }
      });

})