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 = yiiwebResponse::FORMAT_JSON;
            return yiiootstrapActiveForm::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]
        ];
    }

视图：

<?php

use yiihelpersHtml;
use yiiwidgetsActiveForm;
use yiihelpersArrayHelper;
use backendmodulessystemmodelsSystemMenu;
use backendwidgetsFontIconWidget;

/* @var $this yiiwebView */
/* @var $model backendmodulessystemmodelsSystemMenu */
/* @var $form yiiwidgetsActiveForm */
?>


<?php $form = ActiveForm::begin([
    "id" => "login-form",
    "options" => [
        "class" => "form-horizontal",
    ],
    "enableAjaxValidation" => true, // 开启ajax验证
    "enableClientValidation" => true,
    "fieldConfig" => [
        "template" => "{label}
<div class="col-md-8">{input}</div>
<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}
<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>
<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异步无刷新表单验证了！

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