CActiveForm提供了一些方法,这些方法能够方便的去创建一个与数据模型相关联的Form表单。CActiveForm继承自CWidget,所以他需要实现CWidget的init() 和 run() 方法,同时它也实现了一些自己的封装方法。CActiveForm很重要的一个特性就是它支持Ajax校验。我们可以设置CActiveForm的enableAjaxValidation属性为ture来启动Ajax校验。例如,当用户在input框中输入一些值后就会触发Ajax校验。CActiveForm会向服务器提交Ajax请求,用来校验用户当前输入的值。服务器的校验一般是调用模型类Model的validate()方法。如果校验失败,相对应的错误信息将会被返回并显示给用户。即使用户在浏览器禁用javascript,他也会通过整个页面的提交自动回滚到传统的页面验证。
在客户端,Yii认为input框可以存在四个状态:初始化,校验,错误和成功。为了区分这些状态,CActiveForm自动指定了不同的CSS样式给包含此input框的HTML
element。默认情况下,这些CSS样式类的名字为:validating,error,success。当然我们可以使用CActiveForm的options属性去自定义他们。
CActiveForm的提交和校验是基于Ajax模式的。如果你的Form表单中有很大量的数据需要提交,那么这种Ajax模式的提交可能就不那么好了。这种情况下,你可以设计自己轻量级的Ajax校验。使用Yii对JQuery的支持?
使用CActiveForm来做Ajax校验,我们需要使用两个JS库:jquery.js和jquery.yiiactiveform.js。他们的位置在工程根目录下:assets\5ce53e17\文件夹中。不用担心,这些JS库Yii会自动发布到你的工程中。虽然这些动作Yii会悄悄的做,当你必须知道。
目录结构:
login
config
assets (内容自动生成)
models
controllers
views
layouts
site
入口文件:index.php
require_once(dirname(__FILE__).'/../../framework/yii.php');
$config = dirname(__FILE__).'/protected/config/main.php';
Yii::createWebApplication($config)->run();
config/main.php
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..', // DIRECTORY_SEPARATOR => / 'name'=>'Yii login',
'import'=>array(
'application.models.*',
'application.components.*',
)
);
models/LoginForm
class LoginForm extends CFormModel {
public $username;
public $password;
public function rules() {
return array(
array('username, password', 'required'),
array('username', 'authenticate'),
);
}
public function authenticate() {
if($this->username == 'admin') {
$this->addError('username', 'can not login with admin!');
}
}
}
views/layouts/main.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>后台管理系统</title>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/static/css/bootstrap.min.css" />
<script src="<?php echo Yii::app()->request->baseUrl;?>/static/js/jquery.min.js"></script>
</head>
<body>
<div class="container">
<?php echo $content; ?> </div>
<script src="<?php echo Yii::app()->request->baseUrl;?>/static/js/bootstrap.min.js"></script>
</body>
</html>
views/site/login.php
<div class="form">
<?php $form = $this->beginWidget('CActiveForm', array(
'id'=>'login-form',
'enableAjaxValidation'=>true,
'action'=>array('site/Index')
));?> <div class="row">
<?php echo $form->labelEx($model, 'username');?> <?php echo $form->textField($model, 'username');?> <?php echo $form->error($model, 'username');?> </div>
<div class="row">
<?php echo $form->labelEx($model, 'password');?> <?php echo $form->passwordField($model, 'password');?> <?php echo $form->error($model, 'password');?> </div>
<div class="row">
<?php echo CHtml::submitButton('Login');?> </div>
<?php $this->endWidget();?> </div>
controllers/SiteController.php
class SiteController extends CController {
public $layout='main'; // 公共的布局层 public function actionIndex() {
$model = new LoginForm; // 实例化模型 // ajax validate if(isset($_POST['ajax']) && $_POST['ajax'] === 'login-form') {
echo CActiveForm::validate($model);
Yii::app()->end();
}
// submit handle and validate if(isset($_POST['LoginForm'])) {
$model->attributes = $_POST['LoginForm'];
if($model->validate()) {
echo '表单内容已经成功提交成功!';
/* $this->rederPartial('success'); Yii::app()->end();*/ }
}
$this->render('login2', array('model'=>$model));
}
// 登陆处理函数 另名的测试 public function actionLoginHandle() {
$a=1 || $a=2;
echo ++$a;
}
}
Yii的路由 login/index.php?r=site/index
原生表单的提交方式
form action="index.php?r=site/LoginHandle"