element-ui的form表单validateField部分校验问题

最新推荐文章于 2025-03-07 15:53:14 发布

西卡家的毛毛丝

最新推荐文章于 2025-03-07 15:53:14 发布

阅读量2.7k

点赞数

分类专栏： Vue 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/renamayu/article/details/116023257

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

使用element-ui的form表单validateField部分校验问题

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
	<el-form-item label="验证码" prop="code">
		<el-input v-model="form.code" placeholder="请输入验证码" maxlength="6"></el-input>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
		<el-button @click="resetForm('ruleForm')">重置</el-button>
	</el-form-item>
</el-form>
<script>
	export default {
		data() {
			return {
				ruleForm: {
					code: ''
				},
				rules: {
					code: [{
						required: true,
						message: '请输入邀请码',
						trigger: 'blue',
						type: 'number' //当type字段存在时，validateField永远都会返回message的值，去掉type则不会
					}, ],
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs.ruleForm.validateField('code',(valid) => {
					console.log(`${valid}***************************`);       
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>