标签: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