Common form verification

form Verification of forms

One ： Common form verification

1.data

//  Unit information 
info: {},
//  Form validation rules 
formValidators: {
    name: [{ required: true, message: ' Please enter the company name ' }],
    phone: [{ validator: this.validatePhone }],
    email: [{ validator: this.validateEmail }],
},

2.methods

//  Submit 
submit () {
    this.$refs.drawerForm.validate((valid) => {
        if (valid) {
            if (!this.externalId) {
                this.addExternal() //  newly added 
            } else {
                this.editExternal() //  edit 
            }
        }
    })
},
//  Check phone 
validatePhone (rule, value, callback) {
    if (value) {
        const tel = /^0\d{2,3}-?\d{7,8}$/
        const phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
        if (value.length === 11) { //  Phone number 
            if (phone.test(value)) {
                callback()
            }
        } else if (value.length === 13 && value.indexOf('-') !== -1) { //  Phone number 
            if (tel.test(value)) {
                callback()
            }
        }
        callback(new Error(' Please enter the correct phone number '))
    } else {
        callback()
    }
},
//  Checkbox 
validateEmail (rule, value, callback) {
    if (value) {
        const email = /^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/
        if (email.test(value)) {
            callback()
        } else {
            callback(new Error(' Please enter the correct email '))
        }
    } else {
        callback()
    }
},

3.template

<Form
    ref='drawerForm'
    :label-width='80'
    :rules='formValidators'
    :model='info'
>
    <FormItem
        label=' Name of the company ：'
        prop='name'
    >
        <Input
            v-model.trim='info.name'
            clearable
            placeholder=' Please enter the company name '
            maxlength='16'
        />
    </FormItem>
    <FormItem
        label=' contact number ：'
        prop='phone'
    >
        <Input
            v-model.trim='info.phone'
            clearable
            placeholder=' Please enter the contact number '
        />
    </FormItem>
    <FormItem
        label=' mailbox ：'
        prop='email'
    >
        <Input
            v-model.trim='info.email'
            clearable
            placeholder=' Please enter email address '
        />
    </FormItem>
    <FormItem
        label=' remarks ：'
    >
        <Input
            v-model.trim='info.description'
            clearable
            type='textarea'
            placeholder=' Please enter comments '
            :rows='5'
            :show-word-limit='true'
            :autosize='false'
            :maxlength='100'
        />
    </FormItem>
</Form>

Two ：v-if The form verification in does not take effect ？

1. Problem description
In use form When checking the form , Because some fields are displayed and hidden according to special conditions , So use the v-if Control display ; But it was found that v-if Control form elements cannot always be verified .

2. resolvent
Set v-if Plus the elements of key value

<template v-if="result===1">
	<FormItem  label=' Hidden danger name ：'  prop='trouble_name'   key='trouble_name'  >
	      <Input v-model.trim='info.trouble_name' placeholder=' Please enter the hidden danger name ' clearable  />
	</FormItem>
</template>

3. reason

1. Use v-if： Yes form The form contains prop Property to verify rule binding , Is in vue Declaration period mounted Accomplished . and v-if The elements used to switch are destroyed , Led to v-if Form items in , Because in mounted The period is not rendered , So the rules are not bound , Therefore, rules that do not meet the display conditions during initialization will not be generated , Causes the following switching conditions , The verification of the displayed input box will not take effect .

2. Use v-show： All the rules are generated during initialization , Even if it is hidden, it will check the rules .