JQ验证表单
2016-05-27 16:34
543 查看
一、引入jq
二、示例代码
二、示例代码
jQuery(document).ready(function(){ $('#cform img.contact-loader').hide(); $('#cform').submit(function(){ //验证信息 if($('#name').val() == ""){ $("#name").parent().addClass("error"); $("#message").html("请填写你的姓名!").show().addClass("error"); $("name").focus(); return false; } if($('#email').val() == ""){ $("#email").parent().addClass("error"); $("#message").html("请填写你的邮箱!").show().addClass("error"); $("#email").focus(); return false; } if($('#title').val() == ""){ $("#title").parent().addClass("error"); $("#message").html("请填写你的姓名!").show().addClass("error"); $("#title").focus(); return false; } if($('#content').val() == ""){ $("#content").parent().addClass("error"); $("#message").html("请填写你的留言!").show().addClass("error"); $("#content").focus(); return false; } var pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if(!pattern.test($('#email').val())){ $("#email").parent().addClass("error"); $("#message").html("邮箱格式不正确!").show().addClass("error"); $("#email").focus(); return false; } var action = $(this).attr('action'); $("#message").slideUp(750,function() { $('#message').hide().removeClass("error"); $('#submit').attr('disabled','disabled'); $('#cform img.contact-loader').show(); $("#cform fieldset").removeClass('error'); $.post(action, { name: $('#name').val(), email: $('#email').val(), subject: $('#title').val(), comments: $('#content').val() }, function(data){ document.getElementById('message').innerHTML = data.info; $('#message').slideDown('slow').addClass("success"); $('#cform img.contact-loader').fadeOut('slow',function(){$(this).remove();}); $('#submit').removeAttr('disabled'); if(data.status == 1) { document.getElementById('cform').reset(); $('#cform').slideDown('slow'); } } ); }); return false; }); });
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 在线用表单建立文件夹
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作