element-ui 设置表单必填项

最新推荐文章于 2023-11-17 15:46:57 发布

小仙女de成长

最新推荐文章于 2023-11-17 15:46:57 发布

阅读量3.5k

点赞数 1

分类专栏： element UI

原文链接：https://blog.csdn.net/qq_40619526/article/details/80395952

版权

element UI 专栏收录该内容

74 篇文章 15 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
	<div id="app">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="姓名" prop="named">
                <el-input v-model="form.named" ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择" >
                    <el-option label="男" value="man"></el-option>
                    <el-option label="女" value="woman"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmite('form')">确定</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>   
    </div>
</body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				form:{
	                named:"",
	                sex:""
	            },
	            rules:{
	            	named :[{required: true, message: '请输入', trigger: 'blur'}],
	            	sex :[{required: true, message: '请输入', trigger: 'blur'}]
	            }
			},
		    methods: {
		        onSubmite(formData) {
		            this.$refs[formData].validate((valid) => {
		                if (!valid) {         
		                    console.log(this.form) 
		                }
		            });
		        },
		        resetForm(formData) {
		            this.$refs[formData].resetFields();//表单重置
		        }
		    }		
		})
	</script>
</html>

小仙女de成长

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
element-ui 设置表单必填项

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <div i.
复制链接

扫一扫