yii form 表单提交之前JS在提交按钮的验证方法

当我们在 Yii 的视图中使用表单时，我们可能需要对用户输入的数据进行验证，以确保它们符合我们的要求。为了达到这个目的，我们可以使用客户端 JavaScript 在提交表单之前对数据进行验证。下面是如何在 Yii 框架中使用 JavaScript 在提交按钮的验证方法之前进行表单验证的详细攻略：

步骤1：在视图中创建表单

首先，我们需要在 Yii 的视图中创建一个表单。可以使用 ActiveForm 类来创建表单。以下是创建一个包含输入字段和提交按钮的简单表单的代码段：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'example-form',
]);
?>

<?= $form->field($model, 'username')->textInput() ?>
<?= $form->field($model, 'password')->passwordInput() ?>

<?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'submit-btn']) ?>
<?php ActiveForm::end(); ?>

在上述代码中，我们使用 ActiveForm 类创建表单，并向其添加两个输入字段和一个提交按钮。这里的 username 和 password 分别是模型类 $model 的属性名。在实际情况中，你需要替换为真实的模型属性名称。

步骤2：编写 JavaScript 脚本

为了在提交表单之前对数据进行验证，需要编写一个 JavaScript 脚本。该脚本将获取表单输入字段的值，并执行验证逻辑。

以下是一个简单的例子，它检查表单输入的值是否为空，如果是，则在提交表单之前显示一个警告框：

<script>
$(document).ready(function() {
    $('form#example-form').on('submit', function() {
        var inputUsername = $('form#example-form input#example-username').val();
        var inputPassword = $('form#example-form input#example-password').val();

        if (inputUsername === '' || inputPassword === '') {
            alert('Username and password cannot be empty!');
            return false;
        }
    });
});
</script>

在上述代码中，我们使用 jQuery 库。它会在文档准备好之后运行，并且会在表单提交之前拦截提交行为。我们使用 val() 方法获取输入字段的当前值，并将其存储在变量中。然后，我们检查这些变量是否为空，如果为空，则通过 alert() 函数显示警告信息，并返回 false，以阻止提交表单。

步骤3：将 JavaScript 脚本添加到视图中

最后一步是将 JavaScript 脚本添加到视图中。可以将其添加到视图的底部，如下所示：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'example-form',
]);
?>

<?= $form->field($model, 'username')->textInput(['id' => 'example-username']) ?>
<?= $form->field($model, 'password')->passwordInput(['id' => 'example-password']) ?>

<?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'submit-btn']) ?>
<?php ActiveForm::end(); ?>

<script>
$(document).ready(function() {
    $('form#example-form').on('submit', function() {
        var inputUsername = $('form#example-form input#example-username').val();
        var inputPassword = $('form#example-form input#example-password').val();

        if (inputUsername === '' || inputPassword === '') {
            alert('Username and password cannot be empty!');
            return false;
        }
    });
});
</script>

在这个例子中，我们将 JavaScript 脚本添加到表单下方，并使用 <script> 标签将其包装起来。在表单中的每个输入字段中，我们还需要使用 id 属性指定输入字段的 ID。然后，在 JavaScript 脚本中，我们使用这些 ID 来获取输入字段的值。

以上就是使用 Yii 框架中的 JavaScript 在提交按钮的验证方法之前进行表单验证的攻略。如果有任何问题，可以参考 Yii 的官方文档或者在以下示例中尝试自己手动实现一下：

示例1：

这个示例中，表单仅有一个必填字段，名为 input。如果该字段为空，则阻止提交表单。

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'example-form',
    'options' => ['class' => 'form-horizontal'],
]);
?>

<?= $form->field($model, 'input')->textInput(['autofocus' => true]) ?>

<div class="form-group">
    <div class="col-lg-offset-1 col-lg-11">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'submit-btn']) ?>
    </div>
</div>

<?php ActiveForm::end(); ?>

<script>
$(document).ready(function() {
    $('form#example-form').on('submit', function() {
        var inputVal = $('form#example-form input#example-input').val();

        if (inputVal === '') {
            alert('Input cannot be empty!');
            return false;
        }
    });
});
</script>

示例2：

这个示例中，表单有两个必填字段，名为 username 和 password。如果这些字段中有任意一个为空，则阻止提交表单。

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;

$form = ActiveForm::begin([
    'id' => 'example-form',
    'options' => ['class' => 'form-horizontal'],
]);
?>

<?= $form->field($model, 'username')->textInput() ?>
<?= $form->field($model, 'password')->passwordInput() ?>

<div class="form-group">
    <div class="col-lg-offset-1 col-lg-11">
        <?= Html::submitButton('Submit', ['class' => 'btn btn-primary', 'name' => 'submit-btn']) ?>
    </div>
</div>

<?php ActiveForm::end(); ?>

<script>
$(document).ready(function() {
    $('form#example-form').on('submit', function() {
        var inputUsername = $('form#example-form input#example-username').val();
        var inputPassword = $('form#example-form input#example-password').val();

        if (inputUsername === '' || inputPassword === '') {
            alert('Username and password cannot be empty!');
            return false;
        }
    });
});
</script>

希望这个攻略对你有所帮助！