通过vue来验证bootstrap5的表单

bootstrap5中form Validation提供三种方式：1) client-side 2）brower-default 3) server-side.
对于前两种方式，都不能做个性化验证，象elementui那样灵活。还有就是有自定义输入控件时，利用client-side或browser-default就很难处理了。
因此server-side变成唯一选择。只是有了vue等前端框架外，其实server-side也没传到后端，也是在前端完成的。具体实践如下：

1. form中传递isInvalid到各输入组件，并加入一个invalid-feedback div.

<form ref="editorForm" @submit.prevent="onSubmit">
  <div class="modal-header">
    ......
    <component
      :is="getInputComp(tmpFieldType)"
      ......
      :isInvalid="invaldateFields[fld]"
      @update:modelValue="changeValue(fld, $event)"
    />
    <div v-if="fieldRequired(fld)" class="invalid-feedback">
        {{ fieldPlaceHolder(fld) }}.
    </div>

2. data中加入invaldateFields: {}
3. onSubmit()时，验证下数据.

        onSubmit (event) {
            let allValdate = true
            this.formFields.forEach(fld=>{
                if (this.fieldRequired(fld) && !this.data[fld]) {
                    this.invaldateFields[fld] = true
                    allValdate && (allValdate = false)
                }
            })
            if (allValdate) {
                this.$emit('submit')
            }
        }

4. onChangeValue()有输入时，去掉invalidate.

changeValue (key, val) {
    if (this.invaldateFields[key] && val) {
        this.invaldateFields[key] = false
    }
    this.$emit('updateValue', key, this.lang, val)
},

5 在输入组件中加入根据isInvalid，调整样式。

<input
    :type="type"
    :value="modelValue"
    :placeholder="placeholder"
    :class="{'form-control': true, 'is-invalid': isInvalid}"
...