Vue + Iview 表单校验，踩坑总结

1.为需要校验的form表单添加表单校验（这里是在当前页面做一个在列表点击按钮在当前页出现的一个modal页面）

<template>
  <div>
      <div>
          其他内容
      div>
        <Modal
                v-model="showHandlerModal"
                title="处理"
                :mask-closable="false"
                :loading="addModalLoading"
                @on-ok="submiHandler"
                @on-cancel="cancelHandler">
            <Form
                  :label-width="100"
                  ref="handlerRes"
                  :rules="handlerRules"
                  :model="handlerParam"
                >
                  <Row>
                    <Col :span="20">
                      <FormItem label="处理状态">
                        <RadioGroup v-model="handlerParam.status">
                          <Radio :label="1">接收申请Radio>
                          <Radio :label="0">拒绝申请Radio>
                        RadioGroup>
                      FormItem>
                    Col>
                    <Col :span="20">
                      <FormItem label="处理意见" prop="comment">
                        <Input
                          type="textarea"
                          v-model="handlerParam.comment"
                          :autosize="{ minRows: 3 }"
                          placeholder="请输入最少五个字符"
                        >Input>
                      FormItem>
                    Col>
                  Row>
                Form>
        Modal>
   div>
template>

2.Script中的代码

export default {
  name: "ApplyList",
  data() {
    const checkContent = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("内容不能为空"));
      }
      if (value.length < 5) {
        return callback(new Error("内容长度不能少于五个字符"));
      } else {
        return callback(); // 一些同学的问题可能就出在这里
      }
    };
    return {
      showHandlerModal: false,
      addModalLoading: true,
      columns: [      ],
      handlerRules: {
        comment: [{ validator: checkContent, trigger: "blur" }]
        //或者有这种写法： 
        //comment: [
        //  { required: true, message: "内容不能为空", trigger: "blur" },
         // { min: 5, message: "长度在5个字符以上", trigger: "blur" }
        //]
      }
    };
  },
  methods: {
    //提交处理
    async submiHandler() {
      this.$refs["handlerRes"].validate(async valid => {
        if (valid) {
          try {
            const { handlerResult } = await handler(
              this.handlerParam.id,
              this.handlerParam
            );
            this.showHandlerModal = false;
            this.$Notice.success({
              title: "修改成功",
              desc: "",
              duration: 0
            });
          } catch (error) {
            this.$Notice.error({ title: "提示信息", desc: error });
            this.showHandlerModal = false;           
          }
        } else {
          this.addModalLoading = !this.addModalLoading;
          this.$Notice.error({
            title: "提示信息",
            desc: "内容填写有误无法提交!"
          });
          this.$nextTick(() => {
            //在数据修改之后立即使用这个方法，使用此方法可以避免出现的问题
            this.addModalLoading = !this.addModalLoading;
          });
        }
      });
    },
    //取消处理
    cancelHandler() {
      this.$refs["handlerRes"].resetFields();
      this.showHandlerModal = false;
    },
    
  }
};
</script>

3.注意的点

• 1.在表单校验未通过以后，确认按钮会一直处于一个加载状态所有需要将modal的loading设置成false

  this.addModalLoading = !this.addModalLoading;
  

• 2.在表单校验未通过以后，将loading状态改为false以后需要将其重置回去，要不然下一次点击则会直接关闭modal。

  this.$nextTick(() => {
              //在数据修改之后立即使用这个方法，使用此方法可以避免出现的问题
              this.addModalLoading = !this.addModalLoading;
            });
  

• 3.不用在formItem标签中加入**:required=“true”**进行标记