简单实用的反馈表单无刷新提交带验证


Posted in Javascript onNovember 15, 2013

js文件可以查看源码

XML/HTML Code

<div id="preview"></div> 
<div id="formbox"> 
<form name="form" id="form" action="submit.php" method="post"> 
<ul id="ngothastyle3" > 
<li> 
<label>Name</label> 
<input type="text" name="name" class="" maxlength="40" /> 
</li> 
<li> 
<label>Email</label> 
<input type="text" name="email" class="" maxlength="100" /> 
</li> 
<li> 
<label>Message</label> 
<textarea name="message" rows="5" cols="45" class=""></textarea> 
</li> 
<li> 
<label> </label> 
<input type="submit" value="Submit"> 
</li> 
</ul> 
</form> 
</div>

JavaScript Code
<script type="text/javascript"> 
$('document').ready(function(){ $('#form').validate({ 
rules:{ 
"name":{ 
required:true, 
maxlength:40 
}, 
"email":{ 
required:true, 
email:true, 
maxlength:100 
}, 
"message":{ 
required:true 
}}, 
messages:{ 
"name":{ 
required:"This field is required" 
}, 
"email":{ 
required:"This field is required", 
email:"Please enter a valid email address" 
}, 
"message":{ 
required:"This field is required" 
}}, 
submitHandler: function(form){ 
$(form).ajaxSubmit({ 
target: '#preview', 
success: function() { 
$('#formbox').slideUp('fast'); 
} 
}); 
} 
}) 
}); 
</script>
Javascript 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
JS读取XML文件示例代码
Nov 15 #Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 #Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 #Javascript
jQuery Form 页面表单提交的小例子
Nov 15 #Javascript
js简单实现用户注册信息的校验代码
Nov 15 #Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 #Javascript
jquery实现手风琴效果实例代码
Nov 15 #Javascript
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
PHP中常用的输出函数总结
2014/09/22 PHP
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Javascript 二维数组
2009/11/26 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
Python 正则表达式(转义问题)
2014/12/15 Python
Python import用法以及与from...import的区别
2015/05/28 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
宣传口号大全
2014/06/16 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS