用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" : { }, });
}
}); })
用jQuery写的最简单的表单验证的更多相关文章
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- Struts2之Action三种接收参数形式与简单的表单验证
有了前几篇的基础,相信大家对于Struts2已经有了一个很不错的认识,本篇我将为大家介绍一些关于Action接收参数的三种形式,以及简单的表单验证实现,下面进入正题,首先我们一起先来了解一下最基本的A ...
- 使用 layUI做一些简单的表单验证
使用 layUI做一些简单的表单验证 <form method="post" class="layui-form" > <input name ...
- jquery.validate.js使用之自定义表单验证规则
jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...
- 简单js表单验证
简单js表单验证demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org ...
- 简单的表单验证插件(Jquery)
在做web开发的时候经常遇到表单验证问题,表单验证一般有客户端验证和服务器端验证,这个验证插件仅仅能满足我的项目中的基本需求的. Validate_Tools.js function Validate ...
- jQuery简单前端表单验证
<!DOCTYPE html> <html> <head> <title>表单验证</title> <script src=" ...
- jQuery/javascript实现网页注册的表单验证
<html> <head> <meta charset="utf-8"> <title>注册表单验证</title> & ...
- JQuery攻略(五)表单验证
表单验证,字段空白,输入合法,数据合法....... 此章节有 1.1字段验证 1.2正则表达式验证 1.3复选框的勾选 1.1字段验证 1.字段非空 $(document).ready(functi ...
随机推荐
- 用border做一个移动端常见的返回按钮
第一步 .hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid ...
- ogg 初始化
192.168.27.33test11ghdb11gtrandata: 同步delete,update 使用config 文件:同步表使用进程根据SCN号和RBA和主键同步##目的:数据定时同步,从源 ...
- FileZilla客户端源码解析
FileZilla客户端源码解析 FTP是TCP/IP协议组的协议,有指令通路和数据通路两条通道.一般来说,FTP标准命令TCP端口号是21,Port方式数据传输端口是20. FileZilla作为p ...
- 总结一下js的原型和原型链
最近学习了js的面向对象编程,原型和原型链这块是个难点,理解的不是很透彻,这里搜集了一些这方面的资料,以备复习所用 一. 原型与构造函数 Js所有的函数都有一个prototype属性,这个属性引用了一 ...
- jsvc 以daemon方式运行tomcat
原理: 使用jsvc来运行服务,没有了默认8005的shutdown端口: 主进程pid为1,fork 2个进程 运行方式参考:http://commons.apache.org/proper/com ...
- iOS蓝牙开发
蓝牙常见名称和缩写 MFI ======= make for ipad ,iphone, itouch 专们为苹果设备制作的设备 BLE ==== buletouch low energy,蓝牙4.0 ...
- linux中找不到/etc/sysconfig/iptables
解决办法初始化iptables. #iptables -F #service iptables save #service iptables restart
- 免费数据库(SQLite、Berkeley DB、PostgreSQL、MySQL、Firebird、mSQL、MSDE、DB2 Express-C、Oracle XE)
SQLite数据库是中小站点CMS的最佳选择 SQLite 是一个类似Access的轻量级数据库系统,但是更小.更快.容量更大,并发更高.为什么说 SQLite 最适合做 CMS (内容管理系统)呢? ...
- 《JS权威指南学习总结--9.2 类和构造函数》
内容要点: 例9-1展示了在JS中定义类的其中一种方法.但这种方法并不常用,毕竟它没有定义构造函数,构造函数是用来初始化新创建的对象的. 使用关键字new来调用构造函数会自动创建一个新对象,因此构造函 ...
- 记第一届 CCCC-团体程序设计天梯赛决赛 参赛
其他都没什么,上午报道,下午比赛两个半小时,最后139分 但四我超遗憾的是,最后在做L3-1二叉搜索树,因为看到有辣么多人做出来,可是我没做出来啊 比赛结束后看了看其他两道当场吐血,L3-3直捣黄龙不 ...