Bootstrap Vue中b-modal提交数据时必填字段未高亮如何解决

解决方案 #

Bootstrap Vue 提供了开箱即用的原生表单校验能力，无需为每个字段单独编写校验函数，少量调整代码即可实现必填项高亮+默认提示的需求，具体操作如下：

核心调整点 #

• 将弹窗内所有表单元素包裹在 <b-form> 组件中，开启 native-validation 属性启用浏览器原生校验规则
• 给 <b-modal> 新增 no-close-on-ok 属性，避免点击确定按钮时未完成校验就直接关闭弹窗
• 提交逻辑中先调用表单校验方法，校验通过后再执行提交、关闭弹窗等后续操作

完整修改后代码 #

<template>
  <b-modal
    id="formSubmission"
    size="lg"
    title="Basic Details"
    :visible="visibility"
    style="width: 100%"
    no-close-on-ok
    @cancel="hideModal"
    @ok="submitModal($event)"
  >
    <!-- 新增b-form包裹，开启原生校验 -->
    <b-form ref="formRef" native-validation>
      <b-form-select v-model="type" class="form-control" required>
        <b-form-select-option value="type1">
          Type1
        </b-form-select-option>
        <b-form-select-option value="type2">
          Type2
        </b-form-select-option>
      </b-form-select>

      <div v-if="type == 'type1'">
        <b-form-input
          v-model="name"
          type="text"
          style="width:200px"
          autocomplete="off"
          placeholder="Enter Name"
          :required="type == 'type1'"
        ></b-form-input>
      </div>
    </b-form>
  </b-modal>
</template>

<script>
export default {
  data () {
    return {
      visibility: true,
      type: '',
      name: ''
    }
  },
  methods: {
    hideModal () {
      this.visibility = false
    },

    submitModal (event) {
      event.preventDefault()
      // 调用表单原生校验方法
      const isFormValid = this.$refs.formRef.checkValidity()
      if (!isFormValid) return
      // 校验通过后执行提交逻辑
      // ...
      // 提交完成后关闭弹窗
      this.hideModal()
    }
  }
}
</script>

<style>
</style>

效果说明 #

该方案直接复用HTML5原生校验能力，你给字段配置的required固定必填、:required动态必填规则都会自动生效，未填写时会自动触发浏览器默认的提示文案、输入框红色高亮效果，和你使用原生Bootstrap时的体验完全一致。

内容的提问来源于stack exchange，提问作者BATMAN_2008