element ui表单验证
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<!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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)