vue-st-form

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({
  // ...
})