element ui 里的表单验证说明
2017-11-14 13:16
686 查看
<el-table-column label="操作" width="230">
<template scope="scope">
<el-button class='btn' size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button class='btn' size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>//在表格中scope.$index表示行数
一行的内容scope.row
<el-dialog class="edit-dialog" :title="isedit==1?'修改':'新增'" width="90%" :visible.sync="editFormVisible" :close-on-click-modal="true">//editFormVisible指的是是否显示弹窗,close-on-click-modal:指的是是否点击空白处关闭弹窗
<el-form :model="editForm" label-width="160px" :rules="editFormRules" ref="editForm">//editForm表单提交的数据
<el-form-item label="所属平台名称" prop="fdcPlatform">//规则editFormRules,需要验证的字段名fdcPlatform
<el-input v-model="editForm.fdcPlatform"></el-input>
</el-form-item>
<el-form-item label="产品链接">
<el-input v-model="editForm.fdcUrl"></el-input>
</el-form-item>
<el-form-item label="文章标题" prop="fdcTitle">
<el-input v-model="editForm.fdcTitle"></el-input>
</el-form-item>
<el-form-item label="文章内容" prop="fdcNote">
<el-input v-model="editForm.fdcNote"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">//slot="footer"在右下角
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
editFormVisible: false,
//验证
editFormRules: {
fdcTitle: [
{ required: true, message: '请输入文章标题', trigger: 'blur' }
],
fdcPlatform: [
{ required: true, message: '请输入所属平台名称', trigger: 'blur' }
],
fdcNote: [
{ required: true, message: '请输入文章内容', trigger: 'blur' }
],
},
isedit: 0,
//编辑界面数据
editForm: {
ID: 0,
fdcTitle: '',
fdcPlatform: '',
fdcNote: '',
fdcUrl: '',
},
this.editForm = Object.assign({}, row)//复制一个对象的意思,理解了很久
就是生拷贝,我觉得适合弹窗传数据,也适合提交数据用
if (typeof (this.$refs.editForm) != 'undefined')
this.$refs.editForm.resetFields();//这里也理解了很久,我觉得就是为了重置验证规则使用,如果没写这个,等你写了一次不符合规则的字段是,会出现提示,等你到下次再打开,提示还在那里!
<template scope="scope">
<el-button class='btn' size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button class='btn' size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>//在表格中scope.$index表示行数
一行的内容scope.row
<el-dialog class="edit-dialog" :title="isedit==1?'修改':'新增'" width="90%" :visible.sync="editFormVisible" :close-on-click-modal="true">//editFormVisible指的是是否显示弹窗,close-on-click-modal:指的是是否点击空白处关闭弹窗
<el-form :model="editForm" label-width="160px" :rules="editFormRules" ref="editForm">//editForm表单提交的数据
<el-form-item label="所属平台名称" prop="fdcPlatform">//规则editFormRules,需要验证的字段名fdcPlatform
<el-input v-model="editForm.fdcPlatform"></el-input>
</el-form-item>
<el-form-item label="产品链接">
<el-input v-model="editForm.fdcUrl"></el-input>
</el-form-item>
<el-form-item label="文章标题" prop="fdcTitle">
<el-input v-model="editForm.fdcTitle"></el-input>
</el-form-item>
<el-form-item label="文章内容" prop="fdcNote">
<el-input v-model="editForm.fdcNote"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">//slot="footer"在右下角
<el-button @click.native="editFormVisible = false">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
</div>
</el-dialog>
editFormVisible: false,
//验证
editFormRules: {
fdcTitle: [
{ required: true, message: '请输入文章标题', trigger: 'blur' }
],
fdcPlatform: [
{ required: true, message: '请输入所属平台名称', trigger: 'blur' }
],
fdcNote: [
{ required: true, message: '请输入文章内容', trigger: 'blur' }
],
},
isedit: 0,
//编辑界面数据
editForm: {
ID: 0,
fdcTitle: '',
fdcPlatform: '',
fdcNote: '',
fdcUrl: '',
},
this.editForm = Object.assign({}, row)//复制一个对象的意思,理解了很久
就是生拷贝,我觉得适合弹窗传数据,也适合提交数据用
if (typeof (this.$refs.editForm) != 'undefined')
this.$refs.editForm.resetFields();//这里也理解了很久,我觉得就是为了重置验证规则使用,如果没写这个,等你写了一次不符合规则的字段是,会出现提示,等你到下次再打开,提示还在那里!
相关文章推荐
- ElementUI表单验证例子
- 饿了么组件库element-ui正则表达式验证表单,后端验证表单
- Vue Elementui Form表单验证
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- ElementUI之表单验证、数据绑定、路由跳转
- elementui 表单验证
- elementUI表单校验——自定义验证
- vue elementUI之Form表单 验证
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- vue + ElementUI 关闭对话框清空验证,清除form表单
- vue elementUI之Form表单 验证
- Vue ElementUI之Form表单验证遇到的问题
- element-ui的表单验证问题
- ElementUI表单验证使用
- element-ui+vuex共享自定义方法进行表单验证 validator
- vue + ElementUI 关闭对话框清空验证,清除form表单
- 详解ElementUI之表单验证、数据绑定、路由跳转
- vue中使用element-ui进行表单验证的实例代码
- element-ui表单验证
- vue + element-ui 的表单验证失效问题