Detailed description of sample code for dynamic verification of vue elementui el form rules

Introduction: using elementUI

spreadsheet

Different businesses may generate different forms, but they are all stored in the same form control el-form.

Picture introduction:

1. When the user selects one or more options, there will be five options A, B, C, D and E..

2. When users choose short answer questions, they will only know the stem, answer and analysis options (mainly through v-if).

Guide: When users choose different question banks, they will have different form options. At this time, they need to judge according to different test questions when submitting the form for verification. At this point, two rules are needed to dynamically validate the form.

Solution: Make a dynamic judgment in the computed method when loading the page, and return the assignment directly.

Code introduction:

//

Element information

& lt spreadsheet

:model =“addQueTable“

ref =“addQueTable“

:rules =“addQueRulesList“& gt；

& ltEl-form & gt；

//

Rules defined in data

updateQusRulesSel:【】；

updateQusRules:【】；

//

Calculation method

Computational:

{

//

This. updatequtable. show Select a custom identity.

updateQusRulesList:

Function ()

{

if

（this . updatequtable . show select）

{

return

this.updateQusRulesSel

}

other

{

return

this . update qus rules；

}

}

Summary: The value binding in computed will be triggered when the form is displayed (hidden at first). If it is triggered when the page starts to load, it will not be able to determine the value, resulting in an error. In fact, this method can solve the problem.

Second, the simplest solution.

Rules defined in el-form check fields. If a field is hidden by v-if in your rules, the rules will not judge the hidden field option, but only define a complete rule, and the hidden part of v-if will not enter the verification method.

Complicated the simple problem! ! ! ! !

Thanks to this user:

abstract

The above is vue introduced to you by Bian Xiao.

elementui

spreadsheet

Rule dynamic verification sample code, I hope it will help you. If you have any questions, please leave me a message and Bian Xiao will reply you in time. Thank you very much for your support of the script house website!

Articles you may be interested in: vue

Element UI

table

Custom header and line merge vue+elementUI to realize the sample code of upload verification function of forms and pictures. An example of using vue+vue-router+elementUI to realize a simple address book. The vue component based on elementUI and using v-model to realize latitude and longitude input explains how to create it in detail.

Publish your own

A video editing software

User Interface(UI)

component gallery