1.多个form验证成功后才可提交
<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Form>
<Form ref="formInline2" :model="formInline2" :rules="ruleInline" inline>
<FormItem prop="user">
<Input type="text" v-model="formInline2.user" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
</Form>
<Button type="primary" @click="handleSubmit()">Signin</Button>
</template>
<script>
export default {
data () {
const validatorName = (rule,value,callback) => {
if (value.length === 0){
return callback(new Error('user name'));
} else{
callback();
}
};
return {
formInline: {
user: '',
password: ''
},
formInline2: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: 'user name', validator: validatorName}
],
password: [
{ required: true, message: 'Please fill in the password.', trigger: 'blur' },
{ type: 'string', min: 1, message: 'The password length cannot be less than 6 bits',trigger: 'blur' }
]
}
}
},
methods: {
async handleSubmit(name) {
let as = await this.$refs['formInline'].validate();
let as2 = await this.$refs['formInline2'].validate();
console.log(as,'as',as2,'as2')
}
}
}
</script>
2.单项 是否 为必填项（checkbox）
<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem label="test" prop="test">
<Input v-model="formValidate.test" placeholder="test"></Input>
<Checkbox v-model="testbtn">Checkbox</Checkbox>
</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 {
data () {
return {
testbtn:false,
formValidate: {
name: '',
test:'',
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
test:[
{ required: true, message: 'test test test1234567890 ', trigger: 'blur' }
],
}
}
},
watch:{
testbtn(){
if(this.testbtn === true){
this.ruleValidate.test[0].required = false;
this.$refs.formValidate.fields.forEach(function (e) {
if (e.prop == 'test') {
e.resetField()
}
})
}else{
this.ruleValidate.test[0].required = true
}
}
},
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>
