vue表单验证自定义验证规则详解 - 网站

vue表单验证自定义验证规则详解

分类:Vue.js 教程 · 发布时间:2023-03-31 18:35 · 阅读:8208

这篇文章主要为大家详细介绍了vue表单验证自定义验证规则,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue表单验证自定义验证规则,供大家参考,具体内容如下

这是公司里Vue+Element UI的项目。写的验证规则放图:

样式代码:

 

情况反馈表

                                                                                                                                                                                                                                                                                  提交                  

js代码:

data(){   return{      rules:{         way:[          { required: true, message: '请输入听取意见方式', trigger: 'change' }          ],         attitude:[            { required: true, message: '请输入人员态度', trigger: 'change' }          ]          }     } }

记住form表单一定要“:rules=“rules(自己定义)””,下面是自定义规则,放图:

样式代码:

                                               {{username}}                                                                                                                                                                                             提交             

js代码:

data(){       //这里是自定义的规则         var newpwdmin=(rule, value, callback)=>{             if(!value){                return callback(new Error('请输入密码'));               }else if(value !==this.Formname.newpwd){                 return callback(new Error('两次输入密码不一致!'));               }else {                  callback()              }         }       return{       editFormPwd:{            oldpwd:[{    required: true, message: '请输入原密码', trigger: 'blur'}],            newpwd:[{ required: true, message: '请输入密码', trigger: 'blur' },],            newpwds:[{ required: true,validator: newpwdmin, trigger: 'blur'}],                }      } }

提交返回什么就不写了;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。

标签:
vue 表单 验证

相关文章

vue加载视频流,实现直播功能的过程

这篇文章主要介绍了vue加载视频流,实现直播功能的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue2项目升级到Vue3的详细教程

看到好多开源项目都升级了vue3,下面这篇文章主要给大家介绍了关于Vue2项目升级到Vue3的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

解决v-model双向绑定失效的问题

这篇文章主要介绍了解决v-model双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue面试必备之防抖和节流的使用

在这篇文章中,大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者(watchers)以及事件处理程序,文中的示例代码简洁易懂,希望对大家有所帮助

element中async-validator异步请求验证使用

本文主要介绍了element中async-validator异步请求验证使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

返回分类 返回首页