1、需求引入

在做form表单的时候，会碰到前端要对表单进行校验处理，通过会是有input输入框或者select下拉框等，针对这些普通的表单项可以直接直接参照官网上的表单校验方式去处理

       ruleInline: {
                  user: [
                        { 
                                 required: true, 
                                 message: 'Please fill in the user name', 
                                 trigger: 'blur' 
                                }
                          ],
                  password: [
                        { 
                          required: true, 
                          message: 'Please fill in the password.', 
                          trigger: 'blur' 
                        },
                        { 
                          type: 'string', 
                          min: 6, 
                          message: 'The password length cannot be less than 6 bits',                 
                          trigger: 'blur' 
                       }
                    ]
                }

这种方式在通过对表单绑定一个ref即可去进行校验

2、对Form表单进行ref绑定

<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="password">
            <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
        </FormItem>
    </Form>

3、添加校验处理

一般的表单校验是在点击确定事件的时候去触发的，也就是说当用户在点击确定按钮的时候，这个时候前端要做个判断，判断表单中的必填项是否都填了值，如果此时有必填项没有填写值，那么就要触发校验，给出提示，具体操作如下：

// 这是一个点击确定事件
determine() {
      this.$refs.formValidate.validate((val) => {
        if (val) {
          if (this.title == "添加证书") {
            cersavelist({
              name: this.formValidate.name,
              instance: this.formValidate.instance,
              description: this.formValidate.description,
              keystoreContent: this.formValidate.keystoreContent,
              keystorePassword: this.formValidate.keystorePassword,
              truststoreContent: this.formValidate.truststoreContent,
              truststorePassword: this.formValidate.truststorePassword,
            }).then((res) => {
              if (res.code == 0) {
                this.$emit("handleSuccess");
                this.$emit("handlecancel", null);
              }
            });
          } else if (this.title == "编辑证书") {
            cerupdatelist({
              id: this.formValidate.id,
              name: this.formValidate.name,
              instance: this.formValidate.instance,
              description: this.formValidate.description,
              keystoreContent: this.formValidate.keystoreContent,
              keystorePassword: this.formValidate.keystorePassword,
              truststoreContent: this.formValidate.truststoreContent,
              truststorePassword: this.formValidate.truststorePassword,
            }).then((res) => {
              if (res.code == 0) {
                this.$Message.success("编辑成功");
              }
            });
          }
          this.dialogVisible = false;
        } else {
          this.dialogVisible = true;
        }
      });
    },

4、对附件上传加以校验

4.1、form表单部分

//这里是表单中的代码部分
<FormItem label="信任库:" prop="truststoreContent">
        <Upload
          action="http://***************/upload/uploadFile/2" //这个是后台给的上传到的地址
          :on-success="handletrust"  //这是上传文件成功时的回调函数
          ref="trusts"    // 对表单加上ref，用于自定义校验
        >
          <Button>点击上传</Button>
        </Upload>
        <Input
          v-model="formValidate.truststoreContent"
          type="textarea"
          readonly
          :autosize="{ minRows: 3, maxRows: 6 }"
          placeholder=""
        ></Input>
      </FormItem>

2.2、添加一个数组在data选项中

// data中添加一个数组变量，用于去判断是否上传了文件
data(){
    return {
         truststoreList: [],
      }
}

2.3、自定义校验

//自定义校验,我这里是绑定的显示的内容，可以去除Iview的上传列表，自己去写上传后的文件展示的样式，然后你们可以去动态绑定文件附件名称做自定义校验。
truststoreContent: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.truststoreList.length > 0) {
                callback();
              } else {
                callback(new Error("请先上传信任库相关附件"));
              }
            },
            trigger: "change",
          },
        ],

2.4、附件相关的方法

// 这是附件上传成功时候的回调函数，这里去拿到后台返回到的数据，然后在返回到页面上去
handletrust(response, file) {
      if (response.code == 0) {  
        // 附件上传成功后，就取附件里的文本内容拿出来给到文本框去
        this.formValidate.truststoreContent = response.data.fileIds;
       // 当上传的时候这个数组就会push一个值到数组中去，如果数组是空，表示没有上传文件。
        this.truststoreList.push(this.formValidate.truststoreContent); 
        this.$forceUpdate();  // 记住要更新下数据
      }
    },

2.5、打开或者新增的时候就手动清楚文件上传列表

open(row) {
      this.$nextTick(() => {
          this.$refs.keyStore.clearFiles();
          this.$refs.trusts.clearFiles();
        });
      if (row != null) {
        this.title = "编辑证书";
        this.formValidate.id = row.id;
        this.ceronelist();
      } else {
        this.title = "添加证书";
        this.formValidate = {};
      }
      this.dialogVisible = true;
    },

3、展示效果