vue element rules 页面 表单验证 resetFields、clearValidate

maxlength="18"
minlength="15"

:rules="{required: true,message: '请输入正确身份证',
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,trigger: 'blur'}"

纯数字：

oninput="javascript:this.value=this.value.replace(/[^\d-]/g,'')"

this.refs.form.resetFields();//移除校验结果并重置字段值this.refs.form.resetFields(); //移除校验结果并重置字段值this.refs.form.resetFields();//移除校验结果并重置字段值this.refs.form.clearValidate(); //移除校验结果
// 二者都能清除验证，但是resetFields（）会重置字段值，而在vue中大量用到的数据的绑定，很可能出现
// 同一个数据绑定在多处的情况，如果滥用resetFields很可能造成界面上出现莫名的bug

resetFields()使用绑定的数据不会被更新，还是第一次赋值的数据

左边的树和右边的表单用了绑定了相同的数据，点击左边树的每个节点可以在右边进行编辑，右边点击保存
会对数据进行校验，左边树结构每次点击不同节点都要重置校验，我误用了resetFields，造成了会去重置仓库> 大楼数据为空,然后再次左边树结构的数据消失，变为空白。

element 的from表单有 封装的验证方法

onkeyup="javascript:this.value=this.value.replace(/[^\d]/g,'')"

数字框 键盘按键事件 消除非数字字符

弹窗点击取消，清除表单验证

this.$refs['formObj'].resetFields()

next：

this.$nextTick(() => { this.$refs['formObj'].resetFields() })

clear：

if (this.$refs['Form']) {
          this.$refs['Form'].clearValidate()
        }

代码

rulesForitem: {
        classIF: [{ required: true, message: '请选择', trigger: 'change' }],
        TimeOpen: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ]
      },

在表单

<el-form ref="Obj" :model="Obj" label-width="100px" size="mini" :rules="rules">

输入框

{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }