注：经过验证，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的ajax方法来提交表单，从而实现异步数据交换，提高用户体验。 首先，jQuery的$.ajax()函数是进行Ajax请求的核心，它允许我们与服务器进行异步数据通信。在“使用jQuery ajax提交表单...
本主题将深入探讨如何使用jQuery库的AJAX功能将表单数据提交到后台，以及后台如何使用Spring框架来处理这些数据。下面将详细阐述这一过程。 ### 一、前端：使用jQuery的AJAX提交表单 1. **引入jQuery库**：首先...
总结，使用jQuery的Ajax功能提交整个表单涉及的关键点包括：`serialize()`方法、`$.ajax()`或其简化版`$.post()`/`$.get()`、阻止表单默认提交、处理服务器响应以及跨域问题。理解这些概念和用法，能够帮助开发者在...
"jQuery Ajax无刷新提交表单并执行邮件通知"这个主题涉及了两个关键点：一是利用jQuery进行表单验证，二是通过Ajax实现无刷新提交表单，同时触发邮件通知功能。 **1. jQuery表单验证** jQuery提供了丰富的DOM操作...
本资源通过ajax实现对提交的form表单的验证，该代码不但有针对property验证，也有针对object验证，还有一个异步获取对象的实例；包含完整的代码和库文件；在myeclipse8.5和apache-tomcat-6.0.30测试通过；访问网址：...
在本文中，我们将深入探讨如何使用jQuery实现一个完整的用户注册表单提交验证。这个验证系统包括了多个关键的验证环节，如用户名、密码强度、显示/隐藏密码、手机号码输入控制以及手机验证码、真实姓名和身份证号的...
在这个“Ajax使用jQuery提交表单 文件”中，我们将探讨如何利用jQuery实现Ajax提交表单，从而实现异步数据传输，提高用户体验。 首先，我们需要理解jQuery中的Ajax函数`$.ajax()`。这是一个核心函数，可以进行各种...
jQuery Form插件由Malsup开发，是一款非常实用的jQuery扩展，能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据，还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...
在Web开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理以及Ajax交互等任务。...确保正确引入jQuery和`ajaxForm.js`文件，并按照上述步骤设置表单，你就可以实现异步的Ajax表单提交了。
本文将详细介绍如何利用AJAX提交表单的完整流程，以实现更加流畅和用户友好的交互体验。 ### 1. 创建HTML表单 首先，我们需要创建一个HTML表单，它包含了用户输入的数据和一个用于触发AJAX提交的按钮。例如： ```...
- **动态验证**：你可以在表单提交前、按钮点击后等事件中调用 `$.validationEngine('validate')` 来触发验证。 - **异步验证**：通过 `ajaxCall` 规则实现，例如邮箱地址的唯一性验证。 - **自定义事件**：插件提供...
本项目"jquery表单验证Ajax提交.zip"显然聚焦于使用jQuery进行表单验证和利用Ajax技术无刷新提交数据的核心功能。以下是这些知识点的详细说明： **jQuery库** jQuery是一个轻量级的JavaScript库，它通过提供简洁的...
无刷验证（又称实时验证或AJAX验证）是这种技术的一个典型应用，它提高了用户体验，因为在用户输入数据时，可以立即在后台验证其有效性，而无需等待整个表单提交。下面我们将详细探讨jQuery AJAX以及如何实现无刷...
综上所述，“jQuery超强验证表单”涉及的知识点涵盖了jQuery基础、表单验证原理、验证插件使用、自定义规则和错误消息、实时验证、AJAX提交以及错误处理等方面。掌握这些内容，可以提升你在Web开发中处理表单验证的...
PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户输入时即时检查数据有效性，无需等待完整的表单提交，从而显著提升交互体验。 **一、AJAX基础** AJAX 是一种创建...
总之，jQuery提供了强大的工具来简化表单验证的实现，通过结合DOM操作、事件处理和正则表达式，我们可以创建出功能完善、用户体验良好的用户注册表单。这个小项目可以帮助你深入理解这些概念，并实践在实际项目中。
在Vue.js框架中，提交表单是一个常见的任务，特别是在与后端进行数据交互时，我们通常会使用Ajax技术来实现异步通信。Vue.js结合Ajax（通常指的是jQuery的$.ajax或者现代浏览器的fetch API）可以创建高效且用户体验...
"jQuery完整注册表单提交验证"是一个针对此需求的解决方案，它提供了全面的验证功能，确保用户输入的数据符合预期，同时减少了服务器端的压力。本文将深入探讨jQuery如何实现这一功能，以及如何将其应用于实际项目中...
本文将深入探讨如何使用jQuery库来实现一个简单的Ajax表单验证。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。 首先，我们需要理解Ajax的核心概念。Ajax允许我们在后台与...
jQuery.form插件正是为了满足这种需求而设计的，它扩展了jQuery库，使表单异步提交变得更加简单、灵活且强大。本文将详细介绍如何使用jQuery.form插件，实现完美的表单异步提交。 首先，我们需要了解jQuery.form...