iview Form表单校验失效问题
校验规则的 prop名称要和 v-model中的字段名称一致,否则会校验不通过,例如password输入框,prop为passwordProp,字段名称为password,即使输入字段也会校验不通过
<template> <Form ref="formRef" :model="formInline" :rules="ruleInline" inline> <FormItem prop="user"> <Input type="text" v-model="formInline.user" placeholder="请输入用户名" /> </FormItem> <FormItem prop="passwordProp"> <Input type="text" v-model="formInline.password" placeholder="请输入密码" /> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit">提交</Button> </FormItem> </Form> </template> <script> export default { data () { return { formInline: { user: '', password:'' }, ruleInline: { user: [ { required: true, message: '请输入用户名', trigger: 'blur' } ], passwordProp: [ { required: true, message: '请输入密码', trigger: 'blur' } ] } } }, methods: { handleSubmit() { this.$refs.formRef.validate((valid) => { if (valid) { this.$Message.success('校验成功!'); } else { this.$Message.error('校验失败!'); } }) } } } </script>