Yii2具有强大的表单验证功能，能用好表单验证，用户输入就基本掌握了，在这里我和各位聊聊Yii2的客户端验证器。
所谓客户端验证器，就是在HTML代码中使用JavaScript进行验证的验证器。
什么？你在Yii2中没有编写过客户端验证器！是的，那是因为Yii2帮你把客户端验证器自动生成了，让我们一起来看一看Yii2自动生成的客户端验证器长什么样子吧！
上图是一个很简单的输入表单，需要用户输入姓名和年龄，注意看一下，现在表单的两个输入框是灰色的。
如上图，在“年龄”输入框中输入22，点击“提交”按钮后，“姓名”输入框变成了红色，并在其下方出现了一个提示信息：姓名不能为空。“年龄”输入框变为绿色，表示验证通过。这里就是Yii2客户端验证器实现的验证效果。
Tip：如果你看到的提示信息是“姓名 cannot be blank”，修改一下你的Yii2语言设置：
配置文件：\advanced\frontend\config\main.php
将：
'language' => 'en',
修改为：
'language' => 'zh-CN',
如上图，浏览器中，在“姓名不能为空。”文字上点击鼠标右键，在下拉框中选中“检查”就会在界面下方出现前端调试窗口（我使用的Chrome浏览器）。
如上图，在下方的前端调试窗口任意位置，点击一下鼠标左键，按Ctrl+f，会出现左下角红框所示的搜索框，输入“姓名不能为空”，你将会搜索出两个结果，点击搜索框右边的箭头，就可以查看到如图中蓝框所示的客户端验证器代码了。我们仔细看一下这部分JavaScript代码：
jQuery(document).ready(function () {
jQuery('#w0').yiiActiveForm([{"id":"form1-name","name":"name","container":".field-form1-name","input":"#form1-name","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"姓名不能为空。"});yii.validation.string(value, messages, {"message":"姓名必须是一条字符串。","min":2,"tooShort":"姓名应该包含至少2个字符。","max":30,"tooLong":"姓名只能包含至多30个字符。","skipOnEmpty":1});}},{"id":"form1-age","name":"age","container":".field-form1-age","input":"#form1-age","error":".help-block.help-block-error","validate":function (attribute, value, messages, deferred, $form) {yii.validation.required(value, messages, {"message":"年龄不能为空。"});yii.validation.number(value, messages, {"pattern":/^\s*[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?\s*$/,"message":"年龄必须是一个数字。","min":18,"tooSmall":"年龄的值必须不小于18。","max":60,"tooBig":"年龄的值必须不大于60。","skipOnEmpty":1});}}], []);
});
这些JavaScript就是Yii2为我们自动生成的客户端验证器，正是通过它们，前端的表单验证工作才得以有效实现，而我们所需要做的就是去编写rules()中的验证规则即可。Yii2框架已为我们做好了大量基础工作！
好，现在我们就一起来看看rules()是怎么编写的吧！请仔细阅读代码中的注释。
public function rules() {
return [
[['name','age'],'required'],//name,age是必填项'required'
//name项是个字符串(string)，其长度不能少于2个字符，也不能多于30个字符
['name','yii\validators\StringValidator','min'=>2,'max'=>30,'enableClientValidation' =>true],//在一条规则中设置enableClientValidation可以控制此条验证规则的客户端验证是否生效，默认值是true
//['name','string','min'=>2,'max'=>30],//与上句等效，'string'是验证器'yii\validators\StringValidator'的别名
//age项必须是一个有效的整数(integer)，其值不能小于18，也不能大于60
['age','integer','min'=>18,'max'=>60],
];
}
在本例中提到了'string'是验证器'yii\validators\StringValidator'的别名，Yii2提供了23个核心验证器，都是可以使用别名直接书写，非常简洁。
关于这23个核心验证器，请参阅文档：
http://www.yiiframework.com/doc-2.0/guide-tutorial-core-validators.html
需要说明的是，这23个核心验证器，并不是都能够提供客户端验证功能的，比如：unique、exist等，这些验证器是需要在数据库中查询的验证器，在客户端当然是无法直接完成的了。当然，这些验证器通过Ajax技术也实现了仿客户端验证的良好效果。
客户端验证可以使用通过enableClientValidation来进行控制，默认值是true，即客户端验证默认是生效的。
enableClientValidation可以在三处进行设置：
1、在ActiveForm中对整个form进行设置，请参见源码中的注释
2、在ActiveField中对field进行单独设置，请参见源码中的注释
3、在Model的rules中对验证规则进行设置，请参见源码中的注释
本文所涉及到的程序源码：
文件位置：D:\phpwork\advanced\frontend\controllers\DemoController.php
<?php
namespace frontend\controllers;
use Yii;
class DemoController extends CommonController{
public function actionForm1() {
$model=new \frontend\models\Form1();
if ($model->load(Yii::$app->request->post())) {
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return \yii\bootstrap\ActiveForm::validate($model);
}
if($model->validate()){
if ($model->save()) {
return $this->render('form1a',['model'=>$model]);
}else{
$this->error('Sorry,Data save fail!');
}
}else{
return $this->errorDisplay($model->getErrors());
}
}else{
return $this->render('form1',['model'=>$model]);
}
}
}
其中errorDisplay()方法是调用自CommonController，请参见：
http://www.jianshu.com/p/5d2c42166702
文件位置：D:\phpwork\advanced\frontend\models\Form1.php
<?php
namespace frontend\models;
use Yii;
class Form1 extends \yii\base\Model{
public $name,$age;
public function attributeLabels() {
return [
'name'=>'姓名',
'age'=>'年龄',
];
}
public function rules() {
return [
[['name','age'],'required'],//name,age是必填项'required'
//name项是个字符串(string)，其长度不能少于2个字符，也不能多于30个字符
['name','yii\validators\StringValidator','min'=>2,'max'=>30,'enableClientValidation' =>true],//在一条规则中设置enableClientValidation可以控制此条验证规则的客户端验证是否生效，默认值是true
//['name','string','min'=>2,'max'=>30],//与上句等效，'string'是验证器'yii\validators\StringValidator'的别名
//age项必须是一个有效的整数(integer)，其值不能小于18，也不能大于60
['age','integer','min'=>18,'max'=>60],
];
}
public function save() {
return true;
}
}
文件位置：D:\phpwork\advanced\frontend\views\demo\form1.php
<?php
use yii\bootstrap\ActiveForm;
use yii\helpers\Html;
$form = ActiveForm::begin([
//在ActiveForm中设置enableClientValidation可以设置整个表单（form）的客户端验证是否生效，默认值是true；如果此值设置为false，则前端的js验证代码将不会再生成。
'enableClientValidation' => true,
'layout' => 'horizontal',
]);
?>
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">
二、Yii2的表单验证——客户端验证的验证器
</div>
</div>
<div class="panel-body" style="height:500px;">
<!-- 在ActiveField中设置enableClientValidation可以控制field项的客户端验证是否生效，默认值是true -->
<?=$form->field($model,'name',['enableClientValidation'=>true])->textInput()?>
<?=$form->field($model,'age',['inputOptions'=>['class'=>'form-control']])->textInput()?>
<div class="row">
<div class='col-md-2 col-md-offset-4'><?= Html::submitButton('提 交', ['class' => 'btn btn-primary form-control']) ?></div>
<div class='col-md-2 col-md-offset-1'><?= Html::resetButton('重 置', ['class' => 'btn btn-default form-control']) ?></div>
</div>
</div>
</div>
<?php ActiveForm::end(); ?>
文件位置：D:\phpwork\advanced\frontend\views\demo\form1a.php
<?php
use yii\helpers\Html;
use yii\widgets\DetailView;
?>
<div class="panel panel-warning">
<div class="panel-heading">
<div class="panel-title">
二、Yii2的表单验证——客户端验证的验证器(提交数据的显示)
</div>
</div>
<div class="panel-body" style="height:500px;">
<?php
echo DetailView::widget([
'model' => $model,
'attributes' => [
'name:html',
'age',
],
'template' => '<tr><th class="text-right" style="width:150px;">{label}</th><td>{value}</td></tr>',
]);
?>
<button onclick="history.back()" class="btn btn-default">返 回</button>
</div>
</div>
欢迎深入阅读：
一处编写，三处运行的Yii2表单验证
（全文完）
网友评论