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]
        ];
    }

视图：

use 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 */
?>


 $form = ActiveForm::begin([
    'id' => 'login-form',
    'options' => [
        'class' => "form-horizontal",
    ],
    'enableAjaxValidation' => true, // 开启ajax验证
    'enableClientValidation' => true,
    'fieldConfig' => [
        'template' => "{label}\n
{input}
\n
{error}
",
        '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
{input} ".\Yii::t('app', '选择图标')."
\n
{error}
"])->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(' '.\Yii::t('app', '提交'), ['class' => 'btn btn-w-m btn-primary']) ?> 
    div>
div>

 ActiveForm::end(); ?>

效果图：

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

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