前端那些事20240129-前端那些事-弹框表单标题自定义验证

最新推荐文章于 2024-10-10 10:46:31 发布

前端歌谣

最新推荐文章于 2024-10-10 10:46:31 发布

阅读量342

点赞数 7

文章标签：前端状态模式

本文链接：https://blog.csdn.net/qq_41632427/article/details/135914179

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

本文介绍了如何在使用VueCLI开发的CRUD组件中，实现用户密码输入的表单验证，包括必填性和密码一致性检查。开发者展示了如何定义验证规则和触发条件。

摘要由CSDN通过智能技术生成

<avue-crud :data="data" v-model="obj" :option="option" @error="error"></avue-crud>

<script>
export default {
    data() {
      var validatePass = (rule, value, callback)=>{
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback)=>  {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.obj.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        obj:{},
        data: [],
        option:{
          column:[ {
              label:'密码',
              prop:'password',
              rules: [{ required: true,validator: validatePass, trigger: 'blur' }]
            }, {
              label:'确认密码',
              prop:'oldpassword',
              rules: [{ required: true,validator: validatePass2, trigger: 'blur' }]
            } ]
        }
      };
    },
    methods: {
       error(err){
        this.$message.success('请查看控制台');
        console.log(err)
      }
    }
}
</script>