am-form-validate v2.2.3

初衷：由于H5移动端框架方面(类似于vant,mint-ui等)基本很少做表单验证的相关功能，一旦遇到某个页面form中大量的字段验证，无法形成有效的规则验证化。此插件仿照ant-desgin-vue表单验证编写，相似度90%以上，主要是为了容易上手，降低团队的学习成本，拿来即用。此插件已发布npm包，分为vue2和vue3两个版本，对应am-form-validate和am-form-validate@next。

快速上手：

yarn add am-form-validate 或 yarn add am-form-validate@next

全局使用
import Vue from 'vue'
import amFormValidate from 'am-form-validate'
Vue.use(amFormValidate)

局部使用
直接引用am-form-validate/lib三个组件，在components中注册使用

API

Form

事件

方法

Form.Item

校验规则

ant-desgin-vue使用了async-validator这个库配置校验规则。但本插件为了避免过分依赖其它库，除了required内置校验规则外，其它都需要自己写validator进行验证。在rules中配置，以下是phone字段配置实例

phone: [
        {
          validator: (value, callback) => {
            if (!/^1\d{10}$/.test(value)) {
              callback("请输入正确的手机号");
            }
          },
          trigger: "blur",
        },
  ]

每个字段可以配置多个规则，每个规则对象有validator和trigger属性，validator为规则函数，第一个参数是字段值，第二个是抛出相应错误信息的函数，参数为string或error实例(一旦捕捉到错误信息，同一字段的后面规则便不再执行)。trigger为触发条件，值为blur' | 'change' | 'change', 'blur'，默认为'change', 'blur'。由于此插件是用在移动端，基本是input组件使用trigger这个属性。其它非input组件可以使用autoChecked进行自动实时校验，类似‘change’。或者使用validateField方法在相关事件函数中手动校验。

template模板(model和rules定义与ant-desgin-vue一样)

<am-form
      ref="form"
      :model="formData"
      :rules="rules"
      :labelAlign="'left'"
      inline
      @submit="submit"
      @validate="validate"
    >
      <am-form-item
        required
        label="名称："
        required-msg="名字不能为空"
        prop="name"
        :labelAlign="'left'"
      >
        <am-input v-model="formData.name" />
      </am-form-item>
  </am-form>