npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-st-form

v0.1.0

Published

包装 ant-design-vue 的 this.\$form.createForm(this) 支持

Downloads

16

Readme

vue-st-form

包装 ant-design-vue 的 this.$form.createForm(this) 支持

  • 错误抓取
  • 原本的ant中的form的方法全支持
  • 支持rules中的所有选项
  • validator 函数复写 支持直接返回错误信息或使用 Promise return 错误信息
  • 方便的 decorators 构造
  • 自动滚动到错误表单条目
<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-form :form="form">
          <a-form-item label="姓名">
            <a-input
              v-decorator="decorators.name"
              placeholder="请填写名称"
            ></a-input>
          </a-form-item>
          <a-form-item label="年龄">
            <a-input
              v-decorator="decorators.age"
              placeholder="请填写年龄"
            ></a-input>
          </a-form-item>
          <a-form-item label="自定义validator">
            <a-input
              v-decorator="decorators.price"
              placeholder="填写价格"
            ></a-input>
          </a-form-item>
          <a-button @click="onSubmit">提交</a-button>
        </a-form>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    const form = this.$stForm.create();
    const decorators = form.decorators({
      name: {
        initialValue: 3,
        rules: [
          {
            required: true,
            message: "请填写"
          }
        ]
      },
      age: {
        rules: [
          {
            required: true,
            message: "请填写age"
          }
        ]
      },
      price: {
        rules: [
          {
            validator: this.priceValidator
          }
        ]
      }
    });
    console.log(decorators);

    return {
      form,
      decorators
    };
  },
  methods: {
    priceValidator(field, value, values) {
      if (!value) {
        return "请填写价格";
      }
      if (value < 99) {
        return "价格不能小于99";
      }
    },
    onSubmit() {
      console.log("submit");
      this.form.validate().then(values => {
        console.log(values);
      });
    }
  }
};
</script>

validator(rule,value,values){
  return '错误'  // 返回错误信息
  return false // 返回 显示 "{key}字段验证未通过"
  // 返回undeinfed 或者不返回 代表校验通过
  return Promise.reject(new Error('异步错误信息')) // 返回异步错误信息
}

手动校验

// 返回promise 校验成功时resolve 选项和ant表单中validateField()方法中一致
// ①无校验规则,校验所有表单项
this.form.validate().then(values => {
    
})
// ②无校验规则,校验指定表单项
this.form.validate(['name']).then(values => {
    
})
// ③配置表单校验规则,校验所有表单项
let options = {
  first: false,
  firstFields: [],
  force: false,
  scroll: {}
}
this.form.validate(options).then(values => {
    
})
// ④配置表单校验规则,校验所有表单项
// 会在表单校验前,通过给forceFields中的表单项赋值,来触发表单项的validateTrigger
let options = {
  first: false,
  firstFields: [],
  force: false,
  scroll: {},
  forceFields: ['name']
}
this.form.validate(options).then(values => {

})

decorators

// form.decorators新增配置项defalutMessage
form.decorators({
  name: {
    initialValue: 3,
    rules: [
      {
        required: true,
        message: "请填写"
      }
    ],
    defalutMessage: '当校验不通过时,默认返回的错误提示文案'
  }
})

addDecorators

// 动态添加表单验证 注意声明周期放在data()或computed()为宜
form.addDecorators({
  // ...
})