近几天完成了关于我们项目的最简单的表单验证，是用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" : {
},
});
}
});
})