iview form form validation

iview form validation.

The first step: to set the Form property rules: rules
Step two: the need to simultaneously set properties FormItem verify each corresponding field point to prop prop = ""
The third step: Note: Form label inside: model
Step Four: Note: Form tags which must be added REF , corresponding to id, form in this range validated
Step Five: When operating the Save button, add a method to verify the entire form, test parameters for the complete callback returns a Boolean to indicate success or failure.

<Form :label-width="100" ref='dataForm' :model='dataForm' :rules="ruleValidate">
    <FormItem label='编号：' prop="itemNo">
        <Placeholder the Input = " Please enter the number " V-Model = ' dataForm.itemNo ' > </ the Input>
    </FormItem>
    
    ruleValidate: { // Data, and write verification 
        itemNo: [
            Required {: to true , Message: ' number can not be empty ' , Trigger: ' Blur ' },
        ],
    }
    
    addChange (name) { // Methods inside writing method 
        the this . $ refs [name] .validate (Valid => {
             IF (Valid) {}
        });
    } 
</Form>

iview select form validation performed when validation problems fail:

Verify select the label that comes with iview form when not been verified by, because iview default calibration data type String, and I use the select value is number type
ruleValidate: {
    customer:[
        Required {: to true , Message: 'drop down option can not be empty ' , Trigger: ' Blur ' , type: ' Number ' },
    ], 
}

And a drop-down box, as is the date data type
ruleValidate: {
    advance:[
        Required {: to true , Message: ' time can not be empty ' , Trigger: ' Change ' , type: ' DATE ' },
    ],
}

iview for multiple verification of wording:

1. The length of the first number comprises multiple authentication can not be empty for inspection, to verify a second limit, to write regular expressions
ruleValidate: {
    goodsNum: [
        Required {: to true , Message: ' number can not be empty ' , Trigger: ' Blur ' },
        {Type: ' String ' , pattern: / ^ (([ . 1 - . 9 ] \ D { 0 , . 3 }) | 0 ) (. \ \ D { 0 , 2 ?}) $ /, Message: ' Number should be positive float and not more than 9999.99 ' , Trigger: ' Blur ' },
    ],
}

2 . To a first test comprising multiple authentication can not be empty, some of the length of the second restriction to be verified, the write regular expressions
 < the FormItem
    prop = " Telephone " 
    label = " landline "  
    : the rules = " [ 
        {required: to true , Message: ' landline not be empty ' , Trigger: ' Blur ' },
        {pattern: / ^ ((\ D { . 3 , . 4 }) | \ D { . 3 , . 4 ?} - | S) \ D { . 7 , . 8 } $ /, Message: ' landline incorrectly formatted ' , Trigger: ' Blur ' }
    ]"
>
    <m-input type="text" v-model="dataForm.telephone">
    </m-input>
</FormItem> 

end.

Original: https: //blog.csdn.net/amanda_wmy/article/details/79026940