console
var Main = {
data () {
return {
formInline: {
user: '',
password: ''
},
ruleInline: {
user: [
{ required: true, message: 'Please fill in the user name', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please fill in the password.', trigger: 'blur' },
{ type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
]
}
}
},
mounted() {
this.$refs['formInline'].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
methods: {
handleValidate(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleUsernameClearRule() {
this.ruleInline = {
...this.ruleInline,
user: [
{ required: false }
]
}
},
handlePasswordClearRule() {
this.ruleInline = {
...this.ruleInline,
password: [
{ required: false },
{ type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
]
}
}
}
}
var Component = Vue.extend(Main)
new Component().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
<i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<form-item prop="user">
<i-input type="text" v-model="formInline.user" placeholder="Username">
<icon type="ios-person-outline" slot="prepend"></icon>
</i-input>
</form-item>
<form-item prop="password">
<i-input type="password" v-model="formInline.password" placeholder="Password">
<icon type="ios-lock-outline" slot="prepend"></icon>
</i-input>
</form-item>
<form-item>
<i-button @click="handleValidate('formInline')">handleValidate</i-button>
<i-button @click="handleUsernameClearRule">Clear username rule</i-button>
<i-button @click="handlePasswordClearRule">Clear password rule</i-button>
</form-item>
</i-form>
</div>
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}