>[success] # 使用自己的Form ~~~ <template> <div> <h3>具有數據校驗功能的表單組件——Form</h3> <i-form ref="form" :model="formValidate" :rules="ruleValidate"> <i-form-item label="用戶名" prop="name"> <i-input v-model="formValidate.name"></i-input> </i-form-item> <i-form-item label="郵箱" prop="mail"> <i-input v-model="formValidate.mail"></i-input> </i-form-item> </i-form> <button @click="handleSubmit">提交</button> <button @click="handleReset">重置</button> </div> </template> <script> import iForm from '../components/myForm/mForm.vue'; import iFormItem from '../components/myForm/mFormItem.vue'; import iInput from '../components/myInput/myInput.vue'; export default { components: { iForm, iFormItem, iInput }, data () { return { formValidate: { name: '', mail: '' }, ruleValidate: { name: [ { required: true, message: '用戶名不能為空', trigger: 'blur' } ], mail: [ { required: true, message: '郵箱不能為空', trigger: 'blur' }, { type: 'email', message: '郵箱格式不正確', trigger: 'blur' } ], } } }, methods: { handleSubmit () { this.$refs.form.validate((valid) => { if (valid) { window.alert('提交成功'); } else { window.alert('表單校驗失敗'); } }) }, handleReset () { this.$refs.form.resetFields(); } } } </script> ~~~