使用Yii框架自带的CActiveForm实现ajax提交表单

Php代码:

<divclass="form">
<?php$form=$this->beginWidget('CActiveForm',array(
'id'=>'login-form',
'enableAjaxValidation'=>true,
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
'afterValidate'=>'js:function(form,data,hasError){
if(!hasError){
$.ajax({
"type":"POST",
"url":"login",
"data":$("#login-form").serialize(),
"success":function(data){$("#searchResults").html(data);},

});
}
}'
),

));?>

<pclass="note">Fieldswith<spanclass="required">*</span>arerequired.</p>

<divclass="row">
<?phpecho$form->labelEx($model,'username');?>
<?phpecho$form->textField($model,'username');?>
<?phpecho$form->error($model,'username');?>
</div>

<divclass="row">
<?phpecho$form->labelEx($model,'password');?>
<?phpecho$form->passwordField($model,'password');?>
<?phpecho$form->error($model,'password');?>
<pclass="hint">
Hint:Youmayloginwith<tt>demo/demo</tt>.
</p>
</div>

<divclass="rowrememberMe">
<?phpecho$form->checkBox($model,'rememberMe');?>
<?phpecho$form->label($model,'rememberMe');?>
<?phpecho$form->error($model,'rememberMe');?>
</div>

<divclass="rowsubmit">
<?phpechoCHtml::SubmitButton('Login');?>
</div>
<divid="searchResults"></div>

<?php$this->endWidget();?>
</div><!--form-->

看这段代码是yii框架自动生成form表单中的代码，

enableAjaxValidation是否开启ajax验证，

enableClientValidation是否开启客户端验证，

clientOptions是客户端验证选项，开启客户端验证就是像用户名格式、密码格式之类的前端js正则验证就可以了，但是像用户名需要进行唯一性验证的时候，单纯的客户端验证不能实现了，这时候就需要ajax异步验证相配合，所以两个都需要开启，clientOptions中定义了客户端验证是在什么时候进行，我设定的是提交前（submit之前），afterValidate中定义了验证通过之后需要进行的js操作，就是提交表单数据到后台，没什么难点，只是可能有些方法不知道，问百度。

上面配置的返回数据是json对象，而不是json字符串，所以需要在php返回时需要注意下，详细见

PHP如何返回json格式的数据的介绍。

遇到的错误：

1、

UncaughtTypeError:Object[objectObject]hasnomethod'yiiactiveform'

原因是jquery很可能冲突导致的，删除自己引用的jquery，使用Yii自带的jquery，

Yii::app()->clientScript->registerCoreScript('jquery');

2、ajax的js代码都生成了，但是在表单的离开时，并为触发js验证

我的原因是，在<?phpecho$form->textField($model,'femail',array('id'=>'femail','placeholder'=>'Email',));?>增加了id导致Yii在生成html时的id与其默认的冲突了，去掉对id的配置即可。

Yii中还有一个ajax提交的button，

[b]Php代码:[/b]

<?phpechoCHTML::ajaxSubmitButton($label,$url)?>

如果你使用这个按钮，那么你就无法使用表单自带的rule规则验证，即使实现了，也相当麻烦，干脆别用这个，这个按钮适应不需要验证的表单