本篇文章为大家展示了如何在vue项目中利用element-ui实现一个表单验证功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
十载来,成都创新互联公司不忘初心,以网站建设互联网行业服务标杆为目标,不断提升技术设计服务水平,帮助客户在互联网推广自己的产品、服务和品牌,为客户创造价值从而实现自身价值!一、简单逻辑验证(直接使用rules)
实现思路
html中给el-form增加:rules="rules"
html中在el-form-item 中增加属性prop="名称"
js中直接在data中定义rules:{}
html部分
常用地址
js部分
二、自定义验证逻辑
实现思路
html中给el-form增加:rules="rules"
html中在el-form-item 中增加属性prop="名称"
js中直接在data中在rules中的名称对应中设置validator: 验证器名称,
js中在data中 return之上书写验证器对应的js验证逻辑
html部分
js部分
效果图如下
三、表单提交
实现思路
html中给el-form增加ref="form" :model="ruleForm"
html中给提交按钮增加点击事件@click="submitForm('ruleForm')"
()中对应的为form的:model="ruleForm"
js中直接在methods中定义提交事件submitForm(){}
+html部分
//form//表单项 、 ... //提交按钮 立即登录
js部分
methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { //如果通过验证 to do... } else { console.log('error submit!!') return false } }) }
上述内容就是如何在vue项目中利用element-ui实现一个表单验证功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。