Project needs, need counseling iview .. For some time now elementUI up with a feeling almost easy. Use the form validation problems encountered in the process, how to avoid anomalies authentication fails occasionally appear in the validation process?
"1": to <Form> tag set attributes: model = "fromdata" and: rules = "fromrules" and ref = "fromdatadom"
"2": while the need to verify each <FormItem> Set Properties prop, while the property is defined in the validation rule fromrules
Each attribute value is defined in the need to verify fromdata, and:: "3" model bound to the input. Must be set to a value change is still not pass validation
"4": when the save button operation, by ref = "fromdatadom" validation set within a certain range, the callback parameter is examined it, returns a Boolean indicating success or failure
handleSubmit (name) {
the this $ refs [name]. .validate ((Valid) => {
IF (Valid) {
the this Message.success $ ( 'Success!');.
} {the else
. Message.Error An the this $ ( 'the Fail!');
}
})
}
These are the basic steps to verify, but the problems encountered in the process of what I do is because the iview check the default data type string, and occasionally other data types did not pay attention . iview kind of type verification:
type: 'string', //iview默认校验数据类型为String type: 'array', type:'number' type:'integer' //Must be of type number and an integer. type:'float' //Must be of type number and a floating point number. type:'boolean' type:'object' //Must be of type object and not Array.isArray. type:'array' //Must be an array as determined by Array.isArray. type:'regexp' //正则 type: 'email', type: 'date', type:'url' //Must be of type url. enum: Value must exist in the enum. hex: Must be of type hex.
More iview verify details see: https://github.com/yiminghe/async-validator
<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="电话" prop="tel"> <Input v-model="formValidate.mail" placeholder="请输入号码"></Input> </FormItem> <FormItem label="邮箱" prop="mail"> <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input> </FormItem> <FormItem label="城市" prop="city"> <Select v-model="formValidate.city" placeholder="Select your city"> <Option value="beijing">New York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </Select> </FormItem> <FormItem label="日期"> <Row> <Col span="11"> <FormItem prop="date"> <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker> </FormItem> </Col> <Col span="2" style="text-align: center">-</Col> <Col span="11"> <FormItem prop="time"> <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker> </FormItem> </Col> </Row> </FormItem> <FormItem label="Gender " <>=" Gender "prop RadioGroup v-model="formValidate.gender"> <Radio label="man">男</Radio> <Radio label="gril">女</Radio> </RadioGroup> </FormItem> <FormItem label="爱好" prop="interest"> <CheckboxGroup v-model="formValidate.interest"> <Checkbox label="Eat"></Checkbox> <Checkbox label="Sleep"></Checkbox> <Checkbox label="Run"></Checkbox> <Checkbox label="Movie"></Checkbox> </CheckboxGroup> </FormItem> <FormItem label="备注" prop="desc"> <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button> <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> </FormItem> </Form> </template> <script> export default { valideTel const = (rule, value, the callback) => { var Re = / ^. 1 [0-9] {10} / IF (value === '' || value === null ) { the callback ( new new Error ( ' enter phone number ' )) } the else IF ( ! re.test (value)) { the callback ( new new Error ( " Please enter the correct phone number ' )) } the else { the callback () } } data () { return { formValidate: { mail: '', city: '', gender: 'male', interest: [], date: '', time: '', desc: '', tel:'' }, ruleValidate: { tel: [ { validator:valideTel, required: true, trigger: 'blur' } ], mail: [ { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }, { type: 'email', message: 'Incorrect email format', trigger: 'blur' } ], city: [ { required: true, message: 'Please select the city', trigger: 'change' } ], gender: [ { required: true, message: 'Please select gender', trigger: 'change' } ], interest: [ { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' }, { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' } ], date: [ { required: true, type: 'date', message: 'Please select the date', trigger: 'change' } ], time: [ { required: true, type: 'string', message: 'Please select time', trigger: 'change' } ], desc: [ { required: true, message: 'Please enter a personal introduction', trigger: 'blur' }, { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' } ] } } }, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script>