我的Vuejs进阶之旅(四)：表单

本章节主要简要介绍Vue表单，常见问题及解决方法等内容。

3.1 表单元素

常见的表单元素主要有form、input、select、date等。

3.2 表单校验

注：prop对应的不单单是rules规则里面的验证项，同时对应着form-item下的v-model的值。prop绑定的类要与el-form-item下的v-model的值相对应。否则就算校验元素输入字符，也会提示“请输入”之类的提示语，造成校验不友好问题。

下面着重讲下表单校验中的callback()回调函数，在vue自定义表单校验时，不管检验是否通过一定要加 callback();

validateDatasourceNm(rule, value, callback) {
    let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //只允许输入正数
    if (value === '') {
        callback();  //这句话没有的话 会不知名的问题产生。
    } else {
        if (!reg.test(value)) {
            callback(new Error(this.ruleNames[rule.fullField]));
        }
        callback();
    }
}

3.3 动态表单

3.4 常见问题解析

问题描述：在开发Vue项目过程中，应用element-ui做表单验证遇到this.$refs[formName].validate()提示validate()未定义的问题。

原因分析：要验证的DOM，还没有加载出来。

解决措施：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form（有时候获取到数组，需要按下标取值）。

如果确定在拿到了正确的form后，然后再检查该form上添加的表单验证是否正确，需要注意的点有：

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

2. el-form rules，model属性绑定，ref标识

若待验证的form表单尚未渲染的情况下，可应用如下解决方法：

由于form表单并未完成渲染，所以并没有获取到form元素，这里涉及到一个Vue的重要概念：异步更新队列。

Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲同一事件循环中发生的所有数据改变。

在缓冲时会去除重复的数据，这样避免了不必要的计算和DOM操作。然后，在下一个时间循环Tick中，Vue刷新队列并执行已去重的工作。

this.$nextTick(()  =>{
 
})