element 表单提交验证

element表单提交验证

先说下要实现的效果，页面有两个文本框，标题内容要控制在1-20个字之间，内容要控制在1-80个字之间，这是其一，然后点击预览时，如果标题或者内容有一个没填写，就不能预览，要提示填写缺少的内容，这是其二，如果标题超过20或者内容超过80字时候，不能进行预览，要求按提示填写正确内容，先看下页面效果：

下面是代码实现效果：

HTML：

      
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        enctype="multipart/form-data"
        method="post"
        :rules="rules"
      >
        <el-form-item label="通知标题" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入通知标题"
          >el-input>
        el-form-item>
        <el-form-item label="通知内容" prop="desc">
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入通知内容"
          >el-input>
        el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">预览el-button>
          <el-button @click="cancelBuild">取消el-button>
        el-form-item>
      el-form>

JS：

export default {
  name: "messageform",
  data() {
    return {
      form: {
        title: "",
        desc: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入通知标题", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字",
            trigger: "blur",
          },
        ],
        desc: [
          { required: true, message: "请输入通知内容", trigger: "blur" },
          {
            min: 1,
            max: 80,
            message: "长度在 1 到 80 个字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 验证成功要做的事
        } else {
          // 不成功出现显示
          if (this.form.title == "" || this.form.desc == "") {
            // 标题或者内容为空时
            this.$message.error("请填写通知标题或通知内容");
          } else {
            // 标题或者内容超出时
            this.$message.error("请按提示填写正确内容");
          }
          return false;
        }
      });
    },
  },
};

最后就是验证之后的效果图：
标题或内容没有填写时：

标题或内容超出字数时：

这样表单验证效果就实现了，不懂的欢迎随时留言，我会及时回答大家的问题的，哈哈哈~~~