注:经过验证,formValidator只适合一个页面不超过一个表单的情况。
本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证。
主要通过两个插件实现:
第一个:
jQuery Form Plugin
http://jquery.malsup.com/form 主要功能是ajax提交表单
第二个:jQuery formValidator 国产强大的表单验证插件。
http://www.cnblogs.com/wzmaodong
最简单的例子如下:
<html>
<head>
<title>Form</title>
<!-- 引入jQuery -->
<script src="<?php echo base_url()?>style/jquery.js" type="text/javascript"></script>
<!-- 引入jQuery formValidator -->
<link type="text/css" rel="stylesheet" href="<?php echo base_url()?>style/form_valide/style/validator.css"></link>
<script src="<?php echo base_url()?>style/form_valide/formValidator.js" type="text/javascript" charset="UTF-8"></script>
<script src="<?php echo base_url()?>style/form_valide/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<!-- 引入jQuery Form Plugin -->
<script type="text/javascript" src="<?php echo base_url()?>style/ajax_form/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//提供回调函数,提供提交返回结果的处理
var options = {
success:function(data) {
alert(data);
}};
//初始化验证插件,如果提交出错,则弹出对话框,如果正确,则通过ajax提交表单请求。
$.formValidator.initConfig({
formid:"form1",
onerror:function(msg){alert(msg)},
onsuccess:function(){$('#form1').ajaxSubmit(options); return false;}
});
//表单验证
$("#test1").formValidator({
onshow:"请输入用户名,只有输入\"maodong\"才是对的",
onfocus:"用户名至少6个字符,最多10个字符",
oncorrect:"该用户名可以注册"})
.inputValidator({min:6,max:10,onerror:"你输入的用户名非法,请确认"})
.regexValidator({regexp:"username",datatype:"enum",onerror:"用户名格式不正确"});
});
</script>
</head>
<body>
<form action="<?php echo site_url("welcome/post")?>" method="post" name="form1" id="form1">
<td align="right">用户名:</td>
<td><input type="text" name="test1"id="test1" style="width:120px" value="maodong" /></td>
<td><div id="test1Tip" style="width:250px"></div></td>
<input type="submit" name="button" id="button" value="提交" />
</form>
</body>
</html>
php页面:
var_dump($_POST);
试试效果吧,很不错的。
分享到:
相关推荐
该资源包含了一个使用jquery提交表单的代码,简单易懂,喜欢的下载。
利用jquery的ajax提交表单数据到后台。后台使用spring.
用Jquery的Ajax提交整个表单,我用的1.3.2的版本。
jquery ajaxfrom表单提交代码,里面有两个js文件选择任意一个就可以了
Ajax使用jQuery提交表单 文件
jquery Ajax表单输入检测验证一例 jquery Ajax表单输入检测验证一例
jquery表单验证Ajax提交.zip
ajax表单验证,无刷新提交表单,并发送邮件通知
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ,下面我...
本文实例讲述了jQuery ajax提交Form表单的方法。分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移...
Ajax表单提交插件jquery form
jQ顶部下拉ajax验证表单 jQuery顶部下拉ajax验证表单代码下载.zip
使用jQuery.form插件,实现完美的表单异步提交
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传.
Ajax使用jQuery提交表单
jQuery check_expression表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论...
PHP+Jquery+AJAX POST,GET提交表单并接收返回
php+jquery+ajax最简单例子
Form Of Notifications一款来自国外的 jquery Ajax表单输入检测验证一例,如果输入有错误当即给出提示,表单并不能提交,体升用户体验的好方法,Ajax一定要学习一下哦,jQuery是实现Ajax的快速平台,有必要掌握哦。
表单进行无刷新提交,ajax技术 if (!this.length) { log('ajaxSubmit: skipping submit process - no element selected'); return this; } var method, action, url, $form = this; if (typeof options == ...