使用
| rules | 表单验证规则 |
<!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>