<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/element-ui.1.4.3.css">
<title>Document</title>
<style>
.el-row .el-form-item{
display: inline-block;/*行内表单*/
}
</style>
</head>
<body>
<div id="app">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称" prop="named" :rules="[{required: true, message: '请输入', trigger: 'blur'}]">
<el-input v-model="form.named" ></el-input>
</el-form-item>
<el-form-item label="活动地点" prop="addressd" :rules="[{required: true, message: '请输入', trigger: 'blur'}]">
<el-input v-model="form.addressd" ></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region" :rules="[{required: true, message: '请输入', trigger: 'change'}]">
<el-select v-model="form.region" placeholder="请选择活动区域" >
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-row v-for="item of form.seviceList">
<el-form-item label="活动名称" prop="name">
<el-input v-model="item.name" ></el-input>
</el-form-item>
<el-form-item label="活动地点" prop="address">
<el-input v-model="item.address"></el-input>
</el-form-item>
</el-row>
<el-form-item>
<el-button type="primary" @click="addList">添加项</el-button>
<el-button type="primary" @click="ninusList">减少项</el-button>
<el-button type="primary" @click="onSubmite('form')">确定</el-button>
<el-button type="primary" @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
<script src="js/vue.min.js"></script>
<script src='js/element-ui.1.4.3.js'></script>
<script>
var vm = new Vue({
el:"#app",
data:{
form:{
named:"",
addressd:"",
region:"",
seviceList:[
{name:"",address:""}]
},
},
methods:{
addList(){
var list = {name:"",address:""};
this.form.seviceList.push(list);//动态添加项
},
ninusList(){
this.form.seviceList.pop();//动态减少项
},
onSubmite(formName) {
this.$refs[formName].validate((valid) => {
if (!valid) {
throw new Error('参数错误'); //验证判断
}
});
console.log( this.form )
},
resetForm(formName) {
this.$refs[formName].resetFields();//表单重置
},
}
})
</script>
</body>
</html>
element ui表单验证
最新推荐文章于 2024-08-08 09:40:00 发布