【小试牛刀】手写一个form表单,实现校验功能

参照element ui 表单组件,实现一个简易的登录表单校验。 App.vue

<template>
  <div id="app">
    {{value}}
    <k-input :value="value" @input="setVal"></k-input>
    <hr/>
    <k-form :model="userInfo" :rules="rules">
      <k-form-item label="用户名" prop="username">
        <k-input v-model="userInfo.username"></k-input>
      </k-form-item>
      <k-form-item label="密码" prop="password">
        <k-input v-model="userInfo.password" type="password"></k-input>
      </k-form-item>
    </k-form>
  </div>
</template>

<script>
import kInput from "./components/Input.vue";
import KFormItem from "./components/FormItem.vue";
import KForm from "./components/Form.vue";

export default {
  name: "app",
  components: {
    kInput,
    KFormItem,
    KForm
  },
  data() {
    return {
      value: "gg",
      userInfo: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符" }
        ],
        password: [{ required: true, message: "请输入密码" }]
      }
    };
  },
  methods: {
    setVal(val) {
      this.value = val;
    }
  }
};
</script>

Input.vue

<!-- input -->
<template>
  <div>
    <input :type="type" :value="value" @input="onInput" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String
    },
    type: {
      type: String,
      default: "text"
    }
  },
  components: {},

  data() {
    return {};
  },

  computed: {},

  methods: {
    onInput(e) {
      let value = e.target.value;
      this.$emit("input", value);
      this.$parent.$emit("validate")
    }
  }
};
</script>
<style lang='less' scoped>
</style>

FormItem.vue

<!-- FormItem -->
<template>
  <div>
    <label :prop="prop">{{label}}</label>
    <slot></slot>
    <p v-if="errorStatus">{{errorMsg}}</p>
  </div>
</template>

<script>
import  Schema  from "async-validator";
export default {
  props: {
    label: {
      type: String
    },
    prop: {
      type: String
    }
  },
  inject: ["Form"],
  components: {},

  data() {
    return {
      errorStatus: false,
      errorMsg: ""
    };
  },

  mounted() {
    this.$on("validate",this.validator);
  },

  methods: {
    validator() {
      let rules = this.Form.rules[this.prop];
      let value = this.Form.model[this.prop];
      let descriptor = { [this.prop]: rules };
      let schema = new Schema(descriptor);
      schema.validate({[this.prop]:value},errors=>{
        if(errors){
          this.errorStatus = true;
          this.errorMsg = errors[0].message
        }else{
          this.errorStatus = false;
          this.errorMsg = ""
        }
      })
    }
  }
};
</script>
<style lang='less' scoped>
</style>

Form.vue

<!-- Form -->
<template>
  <div>
    <form :model="model" :rules="rules">
      <slot></slot>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    model: {
      type: Object,
      required: true
    },
    rules: Object
  },
  provide() {
    return {
      Form: this
    };
  },
  components: {},

  data() {
    return {};
  },

  computed: {},

  methods: {}
};
</script>
<style lang='less' scoped>
</style>
原文链接:segmentfault.com

上一篇:VUE-tree组件实现(封装文件目录组件,操作目录-render,多个属性v-moadal代替方案,增加钩子函数)
下一篇:通过框架设计理解react、angular、vue区别

相关推荐

  • 高阶组件HOC - 小试牛刀

    1. 前言 老毕曾经有过一句名言,叫作“国庆七天乐,Coding最快乐~”。所以在这漫漫七天长假,手痒了怎么办?于是乎,就有了接下来的内容。。。 2. 一个中心 今天要分享的内容有关高阶组件...

    2 年前
  • 防止在jQuery中双重提交表单

    smhollowayAdam(https://stackoverflow.com/users/553403/smholloway)提出了一个问题:Prevent double submission o...

    2 年前
  • 通过JavaScript跟踪表单更改的最佳方式是什么?

    Ricardo Acras(https://stackoverflow.com/users/19224/ricardoacras)提出了一个问题:What is the best way to tra...

    2 年前
  • 谷歌浏览器禁止表单自动填充

    在项目开发期间发现谷歌浏览器有记住密码的功能,该功能有个问题就是一遇到input type=password就开始自动填充,同一个账户还好,就是bug了。找了一堆解决方案终于找到了办法,下面分享一下解...

    1 年前
  • 详细解读AngularJS中的表单验证编程

    需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填...

    3 年前
  • 详细分析使用AngularJS编程中提交表单的方式

    在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表单,...

    3 年前
  • 记一次 bug : 表单提交时携带不上文件数据

    前言 这段时间我负责的基于 coreui/vue 的后台管理项目遇到难题了。在开发商品上架功能时,表单提交时,上传的图片数据始终为空,参数携带不了。但在发送请求之前是可以正常打印文件数据的。

    2 个月前
  • 记Element表单验证不通过的两个原因及解决

    1. 时间格式 找了很久,才找到原来是这个格式搞得我表单验证不通过。 image.png(/public/upload/8ef5b3a7e690514f7418cdd6476e7237) 这个...

    3 个月前
  • 让前端小姐姐愉快地开发表单

    banner.png(https://img.javascriptcn.com/3e0f4d825c02d2d4955ff6661110c221.png "banner.png") 前端小姐姐:“新...

    1 年前
  • 触发HTML5表单验证

    Drew(https://stackoverflow.com/users/67521/drew)提出了一个问题:Triggering HTML5 Form Validation,或许与您遇到的问题类似...

    2 年前

官方社区

扫码加入 JavaScript 社区