VUE +iView form表单验证

<Form ref="editUser" :model="formItem" inline :label-width="110" label-position="left" :rules="ruleValidate">

<Row>
          <FormItem label="用户名" prop="usplCode" :style="options.formItemStyle">
            <Input :disabled="mode === 'edit'" v-model="formItem.usplCode" placeholder="请输入"></Input>
          </FormItem>

          <FormItem label="真实姓名" prop="usplName" :style="options.formItemStyle">
            <Input v-model="formItem.usplName"  autocomplete="off" placeholder="请输入"></Input>
          </FormItem>
        </Row>

ruleValidate: {
          usplDepaId: [
            {required: true, message: '请选择单位', trigger: 'blur'}
          ],
          // usplDeofId: [
          //   {required: true, message: '请选择所属科室', trigger: 'blur'}
          // ],
          usplCode: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          usplName: [
            {required: true, message: '请输入真实姓名', trigger: 'blur'}
          ],
          usplPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {type: 'string', pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '8-20个字符组成，区分大小写，不能为纯数字或字母', trigger: 'blur' }
          ],
          usplPasswordConfirm: [
            {required: true, message: '请输入确认密码', trigger: 'blur'},
            {validator: valiConfirmPwd, message: '两次输入的密码不一致', trigger: 'blur'}
          ],
          usplCaId: [
            {required: true, message: '请输入key序列号', trigger: 'blur'}
          ],
          usplCardId: [
            {required: true, message: '社康身份证必填, 且不能重复', trigger: 'blur'}
          ],
          usplQueue: [
            {required: true, message: '请输入顺序', trigger: 'blur'}
          ],
          usplManager: [
            {required: true, message: '请选择用户类型', trigger: 'change'}
          ],
          usplResidence: [
            {required: true, message: '请选择是否户籍管理', trigger: 'change'}
          ],
          usplDeryManager: [
            {required: true, message: '请选择', trigger: 'change'}
          ],
          usplIscontrol: [
            {required: true, message: '请选择是否质控用户', trigger: 'change'}
          ],
          usplIsallowAlert: [
            {required: true, message: '请选择是否接收弹窗', type:'string', trigger: 'change'}
          ],
          usplUse: [
            {required: true, message: '请选择是否启用', trigger: 'change'}
          ],
        },

第一步：给 Form 设置属性 rules :rules
第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“
第三步：注意：Form标签里面是 :model
第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效
第五步：在操作保存按钮时，添加方法，对整个表单进行校验，参数为检验完的回调，会返回一个 Boolean 表示成功与失败。

<div slot="footer">
      <Button @click="() => {$emit('closeModal', 'editInitialCheck', false)}">取消</Button>
      <Button type="success" @click="handleSubmit()" :loading="modalLoading">确定</Button>
    </div>

      handleSubmit() {
        this.$refs['editUser'].validate((valid) => {
          if (!this.$refs['depaTreeToSFY'].validate()) return

          if (valid) {
            this.modalLoading = true
            if (this.mode === 'add') {
              addUser(this.formItem).then((res) => {
                this.modalLoading = false
                if (res.data.code && res.data.code === '100000') {
                  this.$emit('closeModal')
                } else {
                  this.$Message.error({
                    content: res.data.message,
                    duration: 3,
                    closable: true
                });
                }
              })
            } else if (this.mode === 'edit') {
              updateUser(this.formItem).then((res) => {
                this.modalLoading = false
                if (res.data.code && res.data.code === '100000') {
                  this.$emit('closeModal')
                } else {
                  this.$Message.error({
                    content: res.data.message,
                    duration: 3,
                    closable: true
                });
                }
              })
            }
          } else {
          }
        })
      },