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

转载于:https://www.cnblogs.com/qqqiangqiang/p/4889177.html

用jQuery写的最简单的表单验证相关推荐

jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
Jquery中使用Validate插件使表单验证更加简单
场景效果介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 UR ...
JS正则表达式实现简单的表单验证（账号，密码，手机号）
首先有三个文本框,和一个提交按钮,第一个输入账号,第二个密码,第三个手机号我们的需求:判断3个文本框是否全部输入正确,当我们点击提交时,如果有一个输入错误则不能提交,全部输入正确则提交成功: 下面直 ...
用jquery实现简单的表单验证
HTML代码: 1 <form action="" method="post" id="form-data">2 <div ...
Vue简单的表单验证
前端验证必不可少~ 输入框验证 vue文件部分: <form :model="form" :rules="rules" ref="form&qu ...
jQuery Validate——表单验证
jQuery Validate插件是 jQuery 团队的一名主要开发成员在2006编写的,至今仍在编写和维护中. jQuery Validate插件为表单的验证提供了强大的验证功能,并且让客户端的验 ...
学习js,尝试写一个表单验证框架(1)－规划
斗胆放到首页来,如果不合适的话就删了吧,谢谢其实这个框架也已经写了一点了,但是越写越乱越没把握,最终决定写成博客的形式,强迫自己慢下步调,一点点仔细地规划,设计,思考,期间也一定会遇到不少问题,还请 ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

用jQuery写的最简单的表单验证

用jQuery写的最简单的表单验证相关推荐

最新文章

热门文章