VueLaravelBootstrap表单验证技巧

<!-- 原有表单 -->
<form name="add_accessory" enctype="multipart/form-data">
    @csrf
    <div class="form-group row">
        <div class="col-12">
            <label>Select Store</label>
            &lt;select class=&quot;form-control&quot; name=&quot;store_id&quot; v-model=&quot;form.store_id&quot; required&gt;
               <option v-for="store in stores" :key="store.id" v-bind:value="store.id">@{{store.channel_id}}</option>
            &lt;/select&gt;
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12">
            <label>Requested Date</label>
            &lt;input type=&quot;text&quot; class=&quot;flatpickr form-control&quot; v-model=&quot;form.request_date&quot; name=&quot;request_date&quot; required&gt;
        </div>
    </div>
    <div class="form-group row">
        <div class="col-12">
            <button type="button" @click="AddAccessory()" class="btn btn-primary">Add New Accessory</button>
        </div>
    </div>
</form>

注意： 确保 select 和 input 标签都带有 required 属性，这是 checkValidity() 方法能够生效的基础。

3.2 修改Vue组件的 AddAccessory 方法

接下来，我们需要修改Vue组件中的 AddAccessory 方法。在该方法内部，我们将获取主表单的所有元素，并逐一检查它们的有效性。只有当所有带有 required 属性的字段都有效时，才显示Bootstrap模态框。

// Vue.js script
var app = new Vue({
    el: '#app',
    mounted: function() {
        // 初始化 flatpickr，确保日期输入框功能正常
        flatpickr(".flatpickr", {
            dateFormat: "Y-m-d", // 根据你的需求设置日期格式
            onChange: (selectedDates, dateStr, instance) => {
                // 更新 Vue data 中的 request_date
                this.form.request_date = dateStr;
            }
        });
    },

    data() {
        return {
            stores: {!! $stores !!},
            users: {!! $users !!},
            form: {
                user_id: '',
                request_date: '',
                store_id: '',
                type: '',
                description: ''
            },
        }
    },
    methods: {
        AddAccessory() {
            // 获取名为 'add_accessory' 的表单中的所有元素
            // 使用 [].slice.call 将 NodeList 转换为数组，以便使用 map 方法
            const formElements = [].slice.call(document.forms.add_accessory.elements);

            // 检查所有元素的有效性
            // map 方法对每个元素调用 checkValidity()，返回一个布尔值数组
            // filter 方法筛选出无效的元素（即 checkValidity() 返回 false 的元素）
            // 如果筛选后的数组长度为 0，则表示所有元素都有效
            const isValid = formElements.map((el) => {
                return el.checkValidity();
            }).filter((v) => v === false).length === 0;

            if (isValid) {
                // 如果表单验证通过，则显示模态框
                $('#accessory').modal('show');
            } else {
                // 如果验证失败，可以添加用户提示，例如触发浏览器默认的验证提示
                // 或者手动显示错误消息。
                // 浏览器通常会在调用 checkValidity() 后自动显示提示。
                // 为了确保提示可见，可以尝试触发一次提交事件，或者聚焦到第一个无效字段。
                console.log('表单验证失败，请检查必填项。');
            }
        },
        CreateAccessory() {
            // 注意：这里需要确保模态框内的表单字段也正确地绑定了 v-model
            // 并且 axios.post 的数据结构与后端期望的一致
            axios.post('/accessory/store', {
                data: this.form, // 确保 this.form 包含了模态框内的数据
            })
            .then(response => {
                // 处理成功响应，例如关闭模态框，刷新数据等
                $('#accessory').modal('hide'); // 关闭模态框
                // $(location).attr('href', '/cashoutdetails'); // 根据需求跳转页面
            })
            .catch(function (error) {
                // 处理错误响应
                console.error('保存失败:', error);
                alert('保存失败，请重试！');
            });
        }
    }
});

代码解释：

• document.forms.add_accessory.elements：这会返回一个 HTMLCollection，包含名为 add_accessory 的表单中的所有表单元素（input, select, textarea, button等）。
• [].slice.call(...)：将 HTMLCollection 转换为一个真正的数组，这样我们就可以使用 map 和 filter 等数组方法。
• el.checkValidity()：对每个表单元素调用此方法，检查其是否满足HTML5的验证约束。
• .filter((v) => v === false).length === 0：筛选出所有验证失败的元素。如果筛选后的数组长度为0，说明所有元素都通过了验证。
• $('#accessory').modal('show')：只有当 isValid 为 true 时，才调用Bootstrap的模态框显示方法。

4. 注意事项与进阶考虑

4.1 HTML5原生验证的局限性

虽然HTML5原生验证简单方便，但它也有一些局限性：

• 样式定制受限： 浏览器默认的验证提示样式通常难以完全自定义。
• 复杂验证逻辑： 对于密码强度、邮箱格式（非简单 type="email"）、自定义正则匹配等复杂验证逻辑，原生 required 属性无法满足。
• 用户体验： 默认提示可能不够友好，或者在某些情况下不够及时。

4.2 更高级的客户端验证框架

对于更复杂的验证需求和更好的用户体验，推荐使用专业的Vue验证库，例如：

• VeeValidate: 这是一个流行的Vue验证库，提供声明式验证、自定义规则、错误消息管理等功能，能够与Vue的响应式系统无缝集成。
• Vuelidate: 另一个强大的Vue验证库，专注于模型验证，允许你定义验证规则并将其应用于数据模型。

这些库能提供更灵活的验证规则、更友好的错误提示以及更好的可维护性。

4.3 关于表单提交路由问题 (/accessory/store 不工作)

原始问题中提到了 accessory/store 路由不工作的问题，点击提交按钮后会跳转到 /accessory/create?type=Case&description=+。这通常是由于以下原因：

1. 模态框内的表单未正确阻止默认提交行为： 在你的模态框表单中，@submit="CreateAccessory()" 应该会阻止默认的表单提交行为。请确保 CreateAccessory 方法没有因为错误而提前退出，或者在某些情况下，事件的默认行为没有被阻止。

   • 排查： 确保 CreateAccessory 方法在Vue实例中正确定义，并且没有语法错误。在 CreateAccessory(event) 中，可以尝试添加 event.preventDefault(); 来显式阻止默认提交，尽管 @submit 修饰符通常会隐式做到这一点。

2. Axios请求数据问题： 你的 axios.post('/accessory/store', { data: this.form }) 传递数据的方式可能不是后端期望的。

   • 排查：
     • 检查 this.form 数据： 在 CreateAccessory 方法中，使用 console.log(this.form) 检查 this.form 对象是否包含了模态框中输入的所有数据（type 和 description）。确保模态框内的 select 和 textarea 元素也使用了 v-model 绑定到 this.form 对应的属性上。
     • Axios数据格式： 通常，Axios 的 post 方法的第二个参数就是请求体数据，不需要再嵌套一个 data 属性。尝试修改为 axios.post('/accessory/store', this.form)。
     • 后端期望的数据结构： 确认Laravel后端 AccessoryController@store 方法期望接收的数据结构。例如，如果后端期望 type 和 description 作为顶层参数，那么 this.form 应该直接包含这些属性。

3. 路由定义或后端控制器问题：

   • 排查： 确保 Route::post('accessory/store','AccessoryController@store'); 路由定义正确，并且 AccessoryController 中的 store 方法能够正确处理请求。检查Laravel的日志文件 (storage/logs/laravel.log)，看是否有任何错误信息。

通过上述客户端验证的实现，我们能够有效控制Bootstrap模态框的显示逻辑，确保用户在进行下一步操作前已满足必要的数据输入条件，从而提升应用的健壮性和用户体验。对于更复杂的验证场景，建议考虑引入专业的Vue验证库。

今天关于《VueLaravelBootstrap表单验证技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！