vue+element实现表单校验功能
2019-05-21 07:07
3523 查看
要实现这个功能其实并不难,element组件直接用就可以,
但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程......
表单校验功能:
实现这个功能,总共分为以下4布:
1.在el-form标签中定义:rules="rules";ref="reference"
2.在el-form-item定义prop="name";
3.在选项data中定义rules校验规则;
4.在提交方法中检查用户行为
template代码:
<el-form :model="Opinion" ref="MyOpinion" :rules="rules" size="small" class="lj-form lj-form-s1" > <el-form-item label="审核意见: " prop="txt" style="margin-bottom:25px;"> <el-input type="textarea" :rows="5" v-model="Opinion.txt"></el-input> </el-form-item> </el-form>
data定义数据代码:
data() { return { Opinion: { radio: "1", txt: "", value: "" }, rules: { txt: [{ required: true, message: "请输入审核意见", trigger: "blur" }] } }; },
methods方法代码:
async approval() { let _this = this; this.$refs.MyOpinion.validate(async valid => { if (valid) { const res2 = await _this.$axios.post(`/approve/approve_refuse`, { ...obj }); if (res2.data.error == 0) { _this.$message.success(res2.data.message); } _this.innerVisible = false; _this.visibleApply = false; } }); }
注意点:①定义prop的时候,值要求是属于form绑定的model数据对象里面,同时名字要一样;
②data中定义rules要在定义表单的数据之后(我一般放在data的最后面)
总结
以上所述是小编给大家介绍的vue+element实现表单校验功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
- vue+element实现批量删除功能
- vue项目实现表单登录页保存账号和密码到cookie功能
- vue+element的表格实现批量删除功能
- vue实现form表单与table表格的数据关联功能示例
- vue+element的表格实现批量删除功能示例代码
- 微信小程序实现表单校验功能
- vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
- 表单校验功能的完整实现步骤
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- 简单实现部分HTML表单校验功能
- vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
- [vue]使用自定义指令实现表单校验
- Angular实现模版驱动表单的自定义校验功能(密码确认为例)
- vue element ui table 过滤功能实现
- vue复合组件实现注册表单功能
- vue实现element-ui对话框可拖拽功能
- Vue+element-ui 实现表格的分页功能示例
- 使用vue+element实现表格的新增、编辑(含下拉框)、删除功能(Vue开发二)
- vue 使用自定义指令实现表单校验的方法