ELEMENTUI Calibration Management Implementation of Multiple Subface Forms

The front-end frame used in the company project is Vue.js + Elementui because there are many big flesh in the business scenario, but Elementui’s form Writing is not very friendly for the split and verification of the form. Initial projects For convenience, multiple forms are often written in a .vue component, which causes the single file to be huge, logic is very complicated. In order to maintain convenience, the split of the form is very important.

Now the following Demo shows our business scene, the parent component is app.Vue, which contains the two subcomponents of PersonForm.Vue and Adsform.Vue (in the actual business scene, possibly Up to 10+ forms). [Submit] button In the parent component app.vue, after clicking the [Submit] button, you should verify the individual subcomponents, if each subcomponent is successfully verified, then submit it.

ElementUI多个子组件表单的校验管理实现 Personform.Vue file

The following code is PERSONFORM. VUE components include name, age, gender. We use the PersonForm class to instantify the value of the PersonForm in the component. In the PersonForm, there is a Static method getRule to get the verification method to get the check object, which is the write method of ElementUI, which is defined in the rules of




Import {ValidateName, Validateage, ValidateSex} from '@ / lib / validator.js' ; // PersonForm class class personform {constructor () {this.name = ''; this.age = null; this.sex = null;} static getRule () {Return {Name: [{Validator: ValidateName, Trigger: 'blur'}], AGE: [{Validator: Validateage, Trigger: 'Blur'}], SEX: [{Validator: Validatesex, Trigger: 'blur'}],}}}}}}}}}}}}}}}}}}} PersonForm: New Personform (), PersonFormRules: Personform.Getrule ()}} .Person-form {width: 400px; Height: 350px; Padding: 20px; border: 1px solid #ccc;} ADSFORM.VUE file The following code is an ADSFORM.VUE component, which includes an advertisement.Name and advertising location. We use the ADSFORM class to instantiate the value of ADSFORM in components. There is a Static method getRule in ADSFORM to get the check method to get the check object.

   Import {NOTEMPTY, VALIDATENAME} from '@ / lib / validator.js'; Class Adsform {Constructor () {this.name ='; this.position = null;} static getRule () {return {name: [{Validator: ValidateName, Trigger: 'Blur'}], Position: [{Validator: NOTEMPTY, TRIGGER: 'Blur'}],}}}}}}}}}}} {return}}} {return}}} {return}}}}}}}: adsform.getrule ()}}} 

.ads-form {width: 400px; Height: 350pxPadding: 20px; border: 1px solid #ccc; margin-left: 30px;}

Validator.js file In PersonForm.Vue and Adsform.Vue, we imported the verification method in Validator.js, which encapsulates the verification rules for the table single attribute values ​​in these verification methods. The method in this file is in the actual project, you should use the policy mode to pack it. There are only 4 methods in DEMO, and there is no packaging to interfere with the reader understanding code. // Verify the name var validatename = (rule, value, callback) => {if (! Value) {callback (new error ('name can't be empty) } Else IF (/ [a-za-z] /. test (value) {Callback (New Error ('Please fill in Chinese name!');} else {callback ();}}; // verification Age Var Validateage = (Rule, Value, Callback) => {const tonumberval = number (value); if ((typeof value === 'string' && value === ') || (value === null) ) {Callback (new error is empty ");} else if (isnan (tonumberval) {callback (new error ('age is numeric type');} else f (! (tonumberval)> 0 && tonumberval {if (value === null) {Callback (New Error ('Gender does not allow empty');} {callback ();}} // Verification is not empty var notempty = Rule, value, callback => {if (value === '' || value === null || value === undefined) {callback (new error ('is not allowed));} else { Callback ();}}}}}}}} {validateName, Validateage, Validatex, Notempty,} App.VUE is a parent component, and when you click the [Submit] button, you should call its ELMENTUI's this. $ REFS [FormName] .validate method to verify the form in each subcomponent. However, it should be noted that this method is an asynchronous method.
So, a getFormPromise is encapsulated to generate the promise object and use promise.all to go parallel to the parallel call to return the final verification result array. APP.VUE


Import personForm from ‘@ / componentS / PERSONFORM ‘; import adsform from’ @ / components / adsform.vue ‘; export default {components: {‘ Person-form ‘: PersonForm,’ Ads-form ‘: adsform,}, methods: {submitform () {/ SubmitForm () {/ / Get the form const personform = this. $ REFS.PERSONFORMCOMP. $ REFS.PERSONFORM; const adsform = this. $ REFS.ADSFORMComp. $ REFS.ADSFORM; // Using Promise.all to check the result promise.all ([PersonForm, Adsform] .map (this.GetFormPromise)). Then (res => {const validateresult = res. every (item => !! item); if (value) {Console.log (‘two forms Verify via ‘);} else {console.log (‘ two forms unable to pass’);}})} {Return New Promise (resolve => {form.validate (res => { Resolve (res);})}}}}
 .app {border: 1px solid #ccc; padding: 20px; width: 900px;} .app .submit-btn {margin-top: 40px;}. Forms-container {display: flex;}    The above is all of this paper, I hope to help everyone, and I hope you will support Tumi Clouds. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment