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' }

        ]

      }