Yii2 Ajax异步验证表单，用于验证用户输入字符串的合法性

yii2中，ActiveForm默认做了客户端验证，但是表单的提交，却不是无刷新的，自定义的验证规则需要提交后才能验证，这样一来页面就刷新了，体验上就不友好了。也就是常常看到的表单提交后页面会刷新。如果想要开启无刷新的模式，只需要在ActiveForm开始开启enableAjaxValidation即可，下面以具体示例实现介绍：

控制器：

    /**     * Creates a new SystemMenu model.     * If creation is successful, the browser will be redirected to the 'view' page.     * @return mixed     */    public function actionCreate()    {        $model = new SystemMenu();        if(!$model->sort) $model->sort = 0;        // 该操作是表单字段失去焦点时异步验证，同时如果直接提交表单，也会先执行该操作进行验证        $model->load($_POST);        if (Yii::$app->request->isAjax) {            Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;            return \yii\bootstrap\ActiveForm::validate($model);        }    //表单提交操作，基本上不需要做改动        if ($model->load(Yii::$app->request->post()) && $model->save()) {            //return $this->redirect(['view', 'id' => $model->id]);            return $this->redirect(['index']);        } else {            return $this->render('create', [                'model' => $model,            ]);        }    }

模型的验证规则：

/**     * @inheritdoc     */    public function rules()    {        return [            [['title', 'sort'], 'required'],            [['status','parent_id'], 'required','message'=> \Yii::t('app', '请选择{attribute}')],            [['parent_id', 'create_time', 'update_time', 'create_user', 'update_user', 'status'], 'integer'],            [['sort'], 'integer', 'min' => 0, 'max' => 999],            [['title'], 'string', 'max' => 50],            [['icon'], 'string', 'max' => 30],            [['icon'], 'match','pattern' =>'/^fa fa-(.*?)+$/'],             [['title'], 'validateIsRequired'],            [['status'], 'in', 'range' => [0, 1]],            [['url'], 'string', 'max' => 255]        ];    }

视图：

<?phpuse yii\helpers\Html;use yii\widgets\ActiveForm;use yii\helpers\ArrayHelper;use backend\modules\system\models\SystemMenu;use backend\widgets\FontIconWidget;/* @var $this yii\web\View *//* @var $model backend\modules\system\models\SystemMenu *//* @var $form yii\widgets\ActiveForm */?><?php $form = ActiveForm::begin([    'id' => 'login-form',    'options' => [        'class' => "form-horizontal",    ],    'enableAjaxValidation' => true, // 开启ajax验证    'enableClientValidation' => true,    'fieldConfig' => [        'template' => "{label}\n<div class=\"col-md-8\">{input}</div>\n<div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-8\">{error}</div></div>",        'labelOptions' => ['class' => 'col-md-4 control-label'],    ],]); ?><div class="row">    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'parent_id')->dropDownList(SystemMenu::menuList()) ?>            </div>            <div class="col-md-6"></div>        </div>    </div>    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'title')->textInput(['maxlength' => true]) ?>            </div>            <div class="col-md-6"></div>        </div>    </div>    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'url')->textInput(['maxlength' => true]) ?>            </div>            <div class="col-md-6"></div>        </div>    </div>    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'icon', ['template' => "{label}\n<div class=\"col-md-8\"><div class=\"input-group\">{input}<a href=\"javascript:;\" id=\"btn-font\" class=\"input-group-addon\"><i class=\"fa fa-image\"></i> ".\Yii::t('app', '选择图标')."</a></div></div>\n<div class=\"row\"><div class=\"col-md-4\"></div><div class=\"col-md-8\">{error}</div></div>"])->textInput(['maxlength' => true, 'id' => 'input-font-icon']) ?>            </div>            <div class="col-md-6"></div>        </div>    </div>    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'sort')->textInput() ?>            </div>            <div class="col-md-6"></div>        </div>    </div>    <div class="col-md-12">        <div class="row">            <div class="col-md-6">                <?= $form->field($model, 'status')->dropDownList(SystemMenu::_statusArray()) ?>            </div>            <div class="col-md-6"></div>        </div>    </div></div><hr><div class="row">    <div class="col-md-1"></div>    <div class="col-md-11">        <?= Html::submitButton('<i class="fa fa-check"></i> '.\Yii::t('app', '提交'), ['class' => 'btn btn-w-m btn-primary']) ?>     </div></div><?php ActiveForm::end(); ?>

效果图：

如此一来就简单的实现了yii2异步无刷新表单验证了！

本主题篇幅短小但内容精湛，希望对你有所帮助！