Requirements scenarios and issues
Declaration: This article is based on the iView form of the validation rule attribute rules, model as the premise, and does not use a single form-item validation rule attribute.
When doing the front-end developer, will often use to form form components, the development of the new requirements of the PM might put forward some rules will change to check requirements, such as a certain form item under certain conditions is a mandatory calibration needs to be done, and under the condition of another is not mandatory, this needs us in the development, Set the verification rule dynamically. Under this demand, can appear a problem don’t know whether you are met, is the last time change the rules before the check result also has been displayed on the page, and this time we have generated new validation rules, some form of validation rules also changed, for example from a mandatory check into the required validation, At this time of the original calibration results should disappear, but the result is not satisfied, small make up for this confusion for a long time, in the baidu search a lot of articles, found everyone’s usage is generally called restFields forcibly remove check result, but when using this method, we fill in the data in the form item also will be removed, So I think this method is not an elegant solution, I just looked at the form component source code, fortunately, finally found an elegant solution, let me share with you below form source code.
Before sharing the source code, I will first give you a summary of the dynamic changes in the form rules, how to make the rules and display effect real-time corresponding.
- Assign a value to the form rules prop as a whole, and do not add a single property to the original object. Even adding a property with $set() does not trigger a re-validation of the entire form (for reasons shared in the source code analysis below). It is recommended to use the object.assign({}, obj1, obj2) methods to assign values to rules.
- When setting a rule dynamically, do not set the rule to the [] array directly if you cancel the requirement for this rule (the reason will be analyzed in the source code below). For example, if an item in a form is not required, set it to
prop: [
{
required: false}]Copy the code
The Form component has two properties that must be used to validate the form, model and rules, both of which are objects. When we use the form, we pass in two objects, and you know what these two properties mean. I’m going to talk to you about some of the highlights.
First of all, the form component has a watch property that listens for the rules. Whenever the rules change, the component calls the validate method. You’ll notice that the rules object does not use deep listening. This validate method does not fire if you want to change some of the validation rules in the rules object. The code for the validate method is shown below.
The main thing that the validate method does is it goes through all of the form-items that we’ve defined, and the form-items are the fields in the figure above, and the fields are the properties in the data of the form, and the fields are an array, When the form is created, this field is pushed into all form-items. It then loops through each form-item and calls the validate method of the form-item (source code shown below).
The following simple introduce this method, this method will get its own rules, which is the first line of code, and then there was a judge rules whether is empty or does not exist, judgement block of code is the rules below check, check the result of the feedback on the page is highlighted in red box, and check the prompt information, etc. The validateState property in the red box is the validation state, which can be success or Error. The “validateMessage” property is a reminder of the result of the verification, usually the value of the “message” property you set in the rule. These are the values in the data property that control the appearance and disappearance of the red prompt on the page. So see here, you should understand if you want to change the page check the status of the display effect, as long as you can change the two values, and what are the two values is decided according to your set of validation rules, so we just make sure validation rules change when the validate method can be invoked to perform. The values of these two will be updated in real time, as will the display on the page. This is where we want to get rid of the failed check state in the first place. The important thing to note here is that we must not make the rule null, because if it is null, the code will be executed in the if block of the validate method. In this case, the this.required value is the prop property of the form-item, and the default value is false. At this time if the outside does not pass this value, the execution of the code will return out, the following validateState, validateMessage attribute value can not be updated, so the parity state on the page will not be removed, this is where we should pay attention.
Well, today’s content to share here, thank you for your patience to read this article, if you have any questions or comments on the above content, welcome to comment here, I will reply in time, bye…
