In general (the components in a form are all components provided by Element), this is how we use form validation with ELM:
Vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input V-model ="formData.inputValue"></el-input> </el-form-item> <el-form-item> <el-button @click="submit"> </el-button> </el-form-item> </el-form> </template> <script> export default { ....... Ellipse data() {return {formData: {inputValue: "}, rules: {inputValue: [{required: true, message: 'Please enter an activity name ', trigger: 'blur'},]}}, methods: { submit() { this.$refs.formRef.validate((valid) => { if (valid) { alert('submit! '); } else { console.log('error submit!! '); return false; }}); } } } </script>However, when we add a custom component to the
component, it is not valid to continue using the above usage. You can see why by looking at the Element-UI source code.
The form validation for the form component of the Element-UI is triggered by the
component. The source code for the el-form-item is as follows:
// El-form-item source mounted() {if (this.prop) {this.patch ('ElForm', 'el.form.addField', [this]); let initialValue = this.fieldValue; if (Array.isArray(initialValue)) { initialValue = [].concat(initialValue); } Object.defineProperty(this, 'initialValue', { value: initialValue }); this.addValidateEvents(); }}, methods: {onFieldBlur() {// The blur event calls this.validate('blur'); }, onFieldChange() {return if (this.validateDisabled) {this.validateDisabled = false; return; } this.validate('change'); Validate}, addValidateEvents() {const rules = this.getRules(); if (rules.length || this.required ! == undefined) { this.$on('el.form.blur', this.onFieldBlur); $on('el.form.change', this.onfieldchange); $on('el.form.change', this.onfieldchange); }}, validate(trigger, callback = noop) {this.validateDisabled = false; const rules = this.getFilteredRule(trigger); // Filter the validation objects that match the validation trigger event if (! rules || rules.length === 0) && this.required === undefined) { callback(); return true; } this.validateState = 'validating'; Const descriptor = {}; if (rules && rules.length > 0) { rules.forEach(rule => { delete rule.trigger; // Remove the trigger property from the Rule object because the trigger property is not required in the validator.validate configuration}); } descriptor[this.prop] = rules; const validator = new AsyncValidator(descriptor); // instantiate the validator const model = {}; model[this.prop] = this.fieldValue; Validator.validate (model, {firstFields: true}, (errors, invalidFields) = bb0 {// ValidateState =! errors ? 'success' : 'error'; This. validateMessage = errors? errors[0].message : ''; callback(this.validateMessage, invalidFields); this.elForm && this.elForm.$emit('validate', this.prop, ! errors, this.validateMessage || null); // Expose the Validate event to the outside world, which is the Elemental-UI Form API event}); }}The
component fires validate with onFieldBlur and onFieldChange callbacks. The
component fires validate with onFieldBlur and onFieldChange callbacks. These two functions are triggered by listening for el.form.blur and el.form.change events in AddValidateEvents. This. $on(‘el.form.blur’, this.onFieldBlur)), so it boils down to firing these two events.
The element of theel-input, el-select, el-cascader, el-checkboxA method to trigger a validation event was found in the source code of the component:
// El-input, El-select, El-cascader, El-checkbox, etc. <script> export default {... Opt out handleValueBlur(val) {// If the value of the component binding has changed, some callback functions can trigger the blur event, others can trigger the change event... Omit this. $emit (' blur 'val); this.dispatch('ElFormItem', 'el.form.blur', [val]); }, handleValueChange(val) {... Omit this. $emit (' change ', val); this.dispatch('ElFormItem', 'el.form.change', [val]); }} </script>In addition to sending blur and change events, two Dispatch methods are called when the component blur or change is used.this.dispatch('ElFormItem', 'el.form.blur', [val]);, to understanddispatchFind this method (a term familiar to those who are familiar with publishing and subscription) in Element’s Emitter.js:
// Emitter.js export default {Methods: {Dispatch (ComponentName, EventName, Params) {// @Param 1: Event Name 3. Additional parameters var parent = this. $parent | | this. $root; var name = parent.$options.componentName; while (parent && (! name || name ! = = the componentName)) {/ / according to the componentName bottom-up recursive search target component parent = parent. $parent; if (parent) { name = parent.$options.componentName; $emit. Apply (parent, [eventName].concat(params)); $emit. Apply (parent, [eventName].concat(params)); }}}}To sum up the code, we know thatdispatchThis is done by publishing events through the target component. So let’s go back to our codethis.dispatch('ElFormItem', 'el.form.blur', [val]);andthis.$on('el.form.blur', this.onFieldBlur);isElFormItemThe subscribed toel.form.blurandel.form.changeTwo events, in order to trigger a checksum, must be executed byElFormItemThe component publishes both events.
So the conclusion is that there is no trigger inside our custom componentel.form.blurandel.form.changeThese two events, so want to useel-form, el-form-itemComponent’s form validation function must be wrapped inside the componentel-form-itemComponent $emitel.form.blurandel.form.change. The code reads like this:
Vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item label=" contents" prop="inputValue" ref="inputValueRef"> <! - add the ref, $emit --> <my-input v-model="formData.inputValue" @blur= "handleBlur" ></my-input> </el-form-item> <el-form-item> <el-button @click="submit"> </el-button> </el-form-item> </el-form> </template> <script> import MyInput from </el-form> </template> <script> import MyInput from './MyInput.vue'; // Custom rich text component export default {....... Omits components: {myInput}, data() {return {formData: {inputValue: "}, rules: {inputValue: [{required: }}}, methods: {handleBlur(v) {// Add a blur event callback to emit this 'el.form.blur' event! this.$refs.inputValueRef.$emit('el.form.blur', v); / / the point! }, submit() { this.$refs.formRef.validate((valid) => { if (valid) { alert('submit! '); } else { console.log('error submit!! '); return false; }}); } } } </script>Finally, you can solve the problem of custom components using the Element form validation.
rendering:
