关于iView UI的表单Form如何进行前端验证

使用iView UI组件进行表单设计的时候，需要进行到的前端验证。

一、引入iView组件

二、表单结构设计完成

三、确保表单元素Form相关指令正确设定

    <Form
      style="border-bottom: 1px solid #ddd"
      :rules="ruleValidate"    //必须设置为:rules
      :model="addMsgdata"      //必须设置为:model
      :label-width="110"
      ref="addForm"            //必须设置ref值，以在通过函数中进行相关判断操作
    >

四、FormItem相关指令正确设定

<FormItem label="姓名:" prop="name">    //其中prop为规则验证名称
    <Input
       v-model.trim="addMsgdata.name"    //.trim是为了取消input框上下的空白，不需要可以忽视
       placeholder="请输入姓名"
     >
    </Input>
</FormItem>

五、script中设置验证规则

 data() {
    return {
      //这里为验证规则
      ruleValidate: {
        //required值代表是否可以为空，message是提示信息，trigger是验证触发方式
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
      //这里是表单元素双向数据绑定的值
      addMsgdata: {
        name: "",
        age: "",
        address: "",
      },
    };
  },

六、函数中根据判断结果进行相关操作

//addMsg函数为表单提交时触发函数   
 addMsg() {
      this.$refs["addForm"].validate((valid) => {
//!valid代表未通过表单验证
        if (!valid) {
          this.$Message["warning"]({
            background: true,
            content: "信息不能为空",
          });
          return false;
        }
        this.$Message["success"]({
          background: true,
          content: "添加成功",
        });
      });
    },

备注：关于表单验证设置完成后，输入数据后依然显示为通过的情况，考虑是否因为prop对应的验证规则中添加了type属性，该属性是否填写错误

希望本篇文档对你有帮助。