标签:data ref prim return this 选择 set esc col
iview框架的Form 组件基于 async-validator 实现数据验证,给 Form 设置属性 rules
,同时给需要验证的 FormItem 设置属性 prop
指向对应字段即可。
简单的验证
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop="name"> <Input v-model="formValidate.name" placeholder="输入你的名字"></Input> </FormItem> <FormItem label="E-mail" prop="mail"> <Input v-model="formValidate.mail" placeholder="输入邮箱地址"></Input> </FormItem> <FormItem label="City" prop="city"> <Select v-model="formValidate.city" placeholder="选择城市"> <Option value="beijing">New York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </Select> </FormItem> <FormItem label="Gender" prop="gender"> <RadioGroup v-model="formValidate.gender"> <Radio label="male">Male</Radio> <Radio label="female">Female</Radio> </RadioGroup> </FormItem> <FormItem label="Hobby" 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="Desc" prop="desc"> <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit(‘formValidate‘)">Submit</Button> <Button @click="handleReset(‘formValidate‘)" style="margin-left: 8px">Reset</Button> </FormItem> </Form>
export default { data () { return { formValidate: { name: ‘‘, mail: ‘‘, city: ‘‘, gender: ‘‘, interest: [], desc: ‘‘ }, ruleValidate: { name: [ { required: true, message: ‘不能为空‘, trigger: ‘blur‘ } ], mail: [ { required: true, message: ‘邮箱不能为空‘, trigger: ‘blur‘ }, { type: ‘email‘, message: ‘格式错误‘, trigger: ‘blur‘ } ], city: [ { required: true, message: ‘请选择城市‘, trigger: ‘change‘ } ], gender: [ { required: true, message: ‘请选择性别‘, trigger: ‘change‘ } ], interest: [ { required: true, type: ‘array‘, min: 1, message: ‘请选择兴趣爱好‘, trigger: ‘change‘ }, { type: ‘array‘, max: 2, message: ‘最多选择两项‘, trigger: ‘change‘ } ], desc: [ { required: true, message: ‘请输入个人介绍‘, trigger: ‘blur‘ }, { type: ‘string‘, min: 20, message: ‘不能少于20个字符‘, trigger: ‘blur‘ } ] } } }, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { //验证成功后执行的方法 } else { //验证失败后执行的方法 } }) }, handleReset (name) { this.$refs[name].resetFields(); } } }
下面是两个输入框之间关联的例子,就拿最近做的一个项目举例吧,async-validator有一个字段validator,可以自定义验证规则
ruleRecord:{ c6: [ { required: true, message: ‘不能为空‘ } ], c7: [ { required: true, message: ‘不能为空‘ }, { validator: checkc7, trigger: ‘blur‘ } ] }
标签:data ref prim return this 选择 set esc col
原文地址:https://www.cnblogs.com/snowRock/p/10637330.html