用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" : { }, }); } }); })
版权声明：本文为qqqiangqiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。