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

2019-11-05 admin

参照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>

[转载]原文链接:https://segmentfault.com/a/1190000020916883

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78858.html

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

相关文章
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&amp;key2=...
2018-07-25
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
HTML5会是下一个风口吗?
2014年10月底, W3C(万维网联盟)正式宣布HTML5正式定稿,科技圈就像发现了可以打破谷歌、苹果所统领的原生APP世界的方法,发表了很多宣讲HTML5将真正开始颠覆原生(Native)App的文章,也开始着力发展HTML5,开始抢占...
2015-11-12
回到顶部