JQuery ajax交付表单及表单验证
日期：2014-05-16 浏览次数：20706 次
JQuery ajax提交表单及表单验证
注：经过验证，formValidator只适合一个页面不超过一个表单的情况。
本例实现功能：通过ajax提交表单，并在提交表单前对表单的数据进行验证。
主要通过两个插件实现：
第一个：
jQuery Form Plugin
http://jquery.malsup.com/form 主要功能是ajax提交表单
第二个：jQuery formValidator 国产强大的表单验证插件。
http://www.cnblogs.com/wzmaodong
最简单的例子如下：
php页面：
试试效果吧，很不错的。
注：经过验证，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);
试试效果吧，很不错的。
1 楼
baiyuxiong
2011-01-11
用chrome浏览器看不到代码。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
