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

Vue js 表单校验失效

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

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

如图所示：

Vue js表单校验中应该注意3个地方的属性值是否一致.png

表单的代码片段：

<template>
  <el-row :gutter="20"
          class="form">

    <!--通知书文书送达公共页面-->
    <el-form label-width="200px"
             size="medium"
             label-position="right"
             :model="notice"
             ref="notice"
             :rules="rules"
             :disabled=bizPublicNoticeDisable>
      <fieldset class="fieldsetnew">
        <legend>
          <span>甲方送达地址和联系方式
          </span>
        </legend>
        <div id="loanrate"
             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="notice.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"
                        class="innerbox"
                        v-model="notice.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="notice.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="notice.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="notice.Email">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他方式:"
                          prop="Other"
                          class="special-input">

              <el-input placeholder="anything else"
                        v-model="notice.Other">
              </el-input>
            </el-form-item>
          </el-col>

        </div>
</fieldset >


  

    </el-form>
  </el-row>

</template>

校验逻辑：

import { validatePhoneTwo, validatePostCode, validateEMail, isInteger ,validateOther} from '@/utils/conValidate.js'

  data() {
    return {

      notice: {

      },

      rules: {// 表单验证
        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' }

        ],
        Email: [
          { required: false, validator: validateEMail, message: '电子邮件信息不合法!', tigger: 'blur' }
        ],
        Other: [
          { required: false, validator: validateOther, message: '长度超过了500个字符!', tigger: 'blur' }
        ]
      }

    }
  },