用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" : { }, }); } }); })
