Vue JS表单校验需要注意的地方[1]

Vue js 表单校验失效

Vue js 中input输入框中在输入数据的情况下仍旧提示不能为空的问题

一定要注意，这三个地方的值必须！必须！必须！要一致，不然会出现自定义校验无法触发等一系列奇怪的问题：

如图所示：

      <fieldset class="fieldsetnew">
        <legend>
          <span>丁方送达地址和联系方式
          </span>
        </legend>
        <div columns="4">

          <el-col :span="12">
            <el-form-item label="送达地址:"
                          prop="SendAddr"
                          class="special-input">
              <el-input type="textarea"
                        :autosize="{ minRows: 1, maxRows: 3}"
                        placeholder="enter"
                        v-model="notice4.SendAddr">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮编:"
                          prop="Postcode"
                          class="special-input">

              <el-input placeholder="postcode"
                        v-model="notice4.Postcode">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件人:"
                          prop="Receiver"
                          class="special-input">

              <el-input placeholder="receiver"
                        v-model="notice4.Receiver">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话:"
                          prop="Phone"
                          class="special-input">

              <el-input placeholder="tel"
                        v-model="notice4.Phone">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮箱:"
                          prop="Email"
                          class="special-input">
              <el-input placeholder="email address"
                        v-model="notice4.Email">
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </fieldset>

      rules: {// 表单验证
         Email: [
          { required: false, validator: validateEMail, message: '电子邮件信息不合法!', tigger: 'blur' }
        ],
        SendAddr: [
          { required: true, message: '地址信息不能为空!', tigger: 'blur' }
        ],
        Postcode: [
          { required: true, validator: validatePostCode, tigger: 'blur' }
        ],
        Phone: [
          { required: true, message: '电话信息不能为空!', tigger: 'blur' },
          { validator: validatePhoneTwo, message: '电话信息不合法!', tigger: 'blur' }
        ],
        Receiver: [
          { required: true, message: '收件人信息不能为空!', tigger: 'blur' }

        ]

      }