通过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}"
            ...