element ui 验证

最新推荐文章于 2024-07-08 11:56:51 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-07-08 11:56:51 发布

阅读量114

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/119634931

版权

这篇博客详细介绍了如何在Vue.js中使用Element UI组件库进行表单验证和数据提交。内容包括利用`el-form`、`el-form-item`、`el-cascader`等组件创建表单，并通过自定义验证规则确保输入的`bmmc`字段为中文，`fbmxh`字段不为空。在提交表单时，使用`this.$refs[form].validate()`进行校验，根据校验结果进行相应操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ref="form"   ref="form"

<el-form
      ref="form"
      :model="form"
      :rules="rules"
      style="width:100%;"
      label-width="90px"
    >





// prop="fbmxh"

<el-form-item label="添加部门" prop="fbmxh">
        <el-cascader
          v-model="form.fbmxh"
          :options="treeSelectList"
          :props="{
            checkStrictly: true,
            expandTrigger: 'hover',
            value: 'id',
            label: 'label'
          }"
        ></el-cascader>
      </el-form-item>


// callback();
data() {
    var isEmpty = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("不能为空"));
      }
      callback();
    };
    var limitChinese = (rule, value, callback) => {
      var pattern = /^[\u4e00-\u9fa5]+$/;
      if (!pattern.test(value)) {
        return callback(new Error("只能写中文"));
      }
      callback();
    };
    return {
      form: {
        fbmxh: "",
        bmmc: "",
        xssx: 0,
        bmzt: "0"
      },
      rules: {
        bmmc: [{ required: true, validator: limitChinese, trigger: "blur" }],
        fbmxh: [{ required: true, validator: isEmpty, trigger: "change" }]
      }
    };
  },



onSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(1);
        } else {
          // alert.log("error submit!!");
          console.log(2);
        }
        console.log(valid);
      });
      console.log("添加的数据", this.form);
      // this.$emit("addSubmit", this.form);
    },