Vue-elementUI 表单校验

Vue-elementUI 表单校验

 

• 前言
• 一、Vue-elementUI 表单校验
• 二：所遇到问题：清空表单失效
• 总结

 

---

前言

代码仅供参考，具体可以根据自己的项目需求完成表单校验，废话不多说，直接上代码！

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue-elementUI 表单校验

{{$t('maintenanceStandard.AddNFCTag')}}

  
    
      
    

    
      
    

    
      
        
      
    
    
    
              
            

  
  

    {{$t('button.cancel')}}
    {{$t('button.confirm')}}
  

data() {
//校验规则
  const checkNameRule = (rule, value, callback) => {
    if (value == '' || !value) {
      callback(new Error(this.$t('workflow.PleaseEnterNfcName')));
    }else{
      callback();
    }
  };
  const checkIdentificationRule = (rule, value, callback) => {
    if (value == '' || !value) {
      callback(new Error(this.$t('workflow.PleaseEnterNfcIdentification')));
    }else{
      callback();
    }
  };
  const checkClassRule = (rule, value, callback) => {
    if (value == '' || !value) {
      callback(new Error(this.$t('workflow.PleaseEnterspecialityClassification')));
    }else{
      callback();
    }
  };

  return {
    rules: {
      NfcName: [
        {required: true, validator: checkNameRule, trigger: "blur"}
      ],
      NFCIdentification: [
        {required: true, validator: checkIdentificationRule, trigger: "blur"}
      ],
      specialityClassification: [
        {required: true, validator: checkClassRule, trigger: "blur"}
      ]

    },
    addview: {
        nfcName:"",
        nfcIdentification:"",
        specialityClassification:"",
        describe:"",
      },
  }
   watch: {
    //如果关闭了dialog,则清空所有警告信息
    dialogFormVisible: function (newVal) {
      if (!newVal) {
        this.cleanWarnings("ruleForm")
      }
    },
  }, 
  
  
  methods: {
  //清除警告信息方法
    cleanWarnings(formName){
      //重置表单到初始值
      this.$refs[formName].resetFields();
    },
  
    //添加NFC,确定所触发的方法
    confirm(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
            saveNfc(this.addview).then((res) => {
              this.$message({
                type: "success",
                message:this.$t('tips.SaveSuccess')
              });
              //校验成功后将窗口关闭
              this.dialogFormVisible = false;
              this.getTableData();
            }).catch((error) => {
              throw error;
            });

        }

    })
    },

 

二：所遇到问题：清空表单失效

 

//清除警告信息方法 ​ cleanWarnings(formName){ ​ //重置表单到初始值 ​ this.$refs[formName].resetFields(); ​ },

问题的本质是因为你编辑时，第一次打开dialog的时候给表单绑定的form赋值了，这时候这个form的初始值就变成了你所赋值的值，所以resetFields的时候，会将form对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值, 而不是在data里声明的初始值，

如表单绑定的值为：

form: {age: 0,name: ''}

但在你打开dialog编辑的时候，需要回显数据的时候，你又对它进行赋值,如

this.form = {age:23,name:“lala”}

这个时候form表单会默认这个新赋的值为初始值

解决

解决方式是，等dialog已经初始化之后再给form赋值，也就是

this.$nextTick(() => { // 这里开始赋值 this.form.xxx = xxx; })

 

总结

    1.使用此方法前检查prop一定必须要写在标签里，写在里面的input上或者其他任何地方都不行        （el-form-item prop属性绑定）
    2.el-form rules，model属性绑定
    3.prop和model和rules中的值都必须一致