element的Form表单使用注意事项

在用vue+element 组件开发的过程中所遇到的问题。

Question1: el-form 上添加disabled 目前不起作用，原因是项目安装的element-ui版本太低了

disabled :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic" >

resolve: 在v-input 上添加即可，在vue中使用就可以在其属性前加上v-bind

 

Question2:el-form中用resetFields方法清空表单时应该注意以下两点

        1.页面上一定要用v-show 代替v-if ，否则this.$refs.refName时调用resetFields方法报错。因为this.$refs.refName === undefined

 

          2.resetFields方法在清空时不一定是以ref="form1" 这个值来捕获的，而是根据   :model="pickNodeData"  来确定的

            e.g.:   :model="data"很重要，有多个表时尽量不要用同一个名字，以下不会同时清空form9和form10 ，清空语句：this.$refs.form9.resetFields();    

                如果写成如下这样，则form9,form10都会被清空，清空语句：this.$refs.form9.resetFields(); 底层应该也是通过观测变量pickNodeData 来做清理的

 

Question3:关于表单验证，:rules="rules" 动态赋值，千万不能写成 :rules="{rules:true}"，这是错的。

           

1.解决办法:在js文件定义一个中间变量转换

           

rules: {  // 提交表单验证规则
  name: [
    {validator: checkCatename, trigger: 'blur'}
  ]
},

rules: { // 提交表单验证规则

       name: [ {} ]

},

aRules:{

        name:[{ required:true,message:"不能为空",trigger:blur }]    

},

bRules:{

        name:[{validator:cst_name,trigger:change}]    

},

....略

watch:{ // 监听，转换
  某变量：function(xx){
    if(xx == yy){
      this.rules = this.aRules;
    }else{
      this.rules = this.bRules;
    }
  }
}

2.表单项是否添加验证起作用，决定于以下几点：

第一点：

第二点：el-form上记得设置rules 

自定义规则：

// 非必填项
var double_zeroToTenbillion = (rule, value, callback) => {
  if(value == ""){
    callback();
  }else{
    if(!(/^\d{1,10}$|^\d{1,10}\.\d{1,2}$/.test(value))){
      return callback(new Error("该项数值范围是0-9999999999.99，且最多允许保留两位小数"));
    }else{
      callback();
    }
  }
};
//必填项
var integer_zeroToTenbillion__required = (rule, value, callback) => {
  if(!(/^\d{1,10}$/.test(value))){
    return callback(new Error("该项数值范围是0-9999999999的整数"));
  }else{
    callback();
  }
};