讲一讲Vue+Ant Design表单验证

最新推荐文章于 2024-08-16 14:32:16 发布

.NET跨平台

最新推荐文章于 2024-08-16 14:32:16 发布

阅读量8.3k

点赞数 3

分类专栏： Vue.js(Vue 2/Vue 3) 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/WuLex

版权

Vue.js(Vue 2/Vue 3) 专栏收录该内容

92 篇文章 4 订阅

订阅专栏

与Vue搭配的后台管理UI框架，最火的莫过于饿了吗的element-ui和阿里的Ant Design，这两个框架都在实际项目上使用过，也都是各有各的优点

最先接触的还是element - ui，后来项目调整，才接触到Ant Design，Form表单这块不支持双向绑定式的校验功能，在1.5.0+版本增加了FormModel表单才支持。今天就讲讲这两个在项目上使用的区别

1 `Form` 表单

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。但是不支持双向绑定

使用

<template>
  <a-form :form="form"></a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
};
</script>

表单验证

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    // 表单验证
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
        }
      });
    },
  },
};
</script>

表单赋值

this.form.setFieldsValue({
    note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
});

赋值的时候需要调用setFieldsValue才能改变表单控件的值。

2 `FormModel` 表单

功能同上，支持v-model

使用

<template>
  <a-form-model ref="ruleForm" :model="form">
    <a-form-model-item>
      <a-input v-model="form.name"/>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
    };
  },
};
</script>

表单验证

表单验证a-form-model增加rules，再每个表单增加ref和prop就可以了，rules这个是对象，所以的验证规则都可以写在里面，一个表单项也可以有多个验证规则。

<template>
  <a-form-model ref="ruleForm" :model="form" :rules="rules">
    <a-form-model-item ref="name" label="Activity name" prop="name">
      <a-input v-model="form.name"/>
    </a-form-model-item>
    <a-form-model-item>
      <a-button type="primary" @click="onSubmit">
        Create
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: '',
      },
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

表单赋值

表单赋值这个由于是双向绑定，所以直接赋值即可

this.form.name = 'lilei'

3 总结

Form和FormModel都具有数据收集、校验和提交功能，区别就在于是否支持双向绑定式的校验功能，如果使用FormModel，Ant Design版本需要1.5.0+。

`ant-design-vue` 表单验证和 `validator` 自定义表单验证

在 ant-design-vue 中，提供 FormModel 表单组件，且支持 v-model 数据绑定，同时可以校验和提交功能的表单。

一、表单验证

<a-form-model
  ref="form"
  :rules="rules"
  :model="form"
  layout="inline"
  :label-col="{span: 10}"
  :wrapper-col="{span: 14}"
>
  <a-form-model-item
    label="密码"
    prop="password"
    class="w300"
  >
    <a-input
      v-model="form.password"
      type="password"
    />
  </a-form-model-item>
  ......
</a-form-model>

校验规则：

const rules = {
  username: [{ required: true, message: '该选项必填' }],
  password: [{ validator: validatePass, tirgger: 'change'}]
}
rules = Object.freeze(rules)

补充 Object.freeze() 知识点：

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改；也不能添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举型、可配置性、可写性，以及不能修改已有属性的值。那么 Object.freeze() 使用的应用场景是什么呢？

如果你有一个巨大的数组或者对象，并且确信数据不会修改，使用 Object.freeze() 可以让性能大幅提升。在我的实际开发中，这种提升大约有5~10倍，倍数随着数据量递增。对于纯展示的大数据，都可以使用 Object.freeze 提升性能。Object.freeze() 冻结的是值，你仍然可以将变量的引用替换掉。

对于自定义校验 callback 必须被调用。

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
  }
  callback()
}

表单验证功能之 validate 方法：对症表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。

// 表单验证
this.$refs.form.validate(valid => {
  if (valid) {
    console.log('submit!')
  } else {
    console.log('error')
    return false
  }
})
 
// 表单重置
this.$refs.ruleForm.resetFields();

在【提交按钮】中，调用上述 validate 方法，获取返回的校验结果即可。

validate () {
  return new Promise((resolve) => {
    this.$refs.form.validate(valid => {
      resolve(valid)
    })
  })
}

我们上述将验证信息使用 promise 进行返回，提交多个表单验证使用，采用 Promise.all 来获取所有表单的验证结果。

async handleSubmit () {
    const formValidate = this.$refs.form ? this.$refs.form.validate : () => Promise.resolve(true)
    let result = await Promise.all([formValidate(), this.$refs.goods.validate()])
    result = result.find(r => r === false)
    if (result === undefined) {
 
    } else {
        this.$antdMessage.success('信息不完整')
    }
}

二、`validator` 自定义表单验证

在官方还提供 async-validator 用来异步校验表单。首先我们需要安装依赖：

npm i async-validator

基本用法包括定义一个 descriptor，将其分配给一个 schema，并将要验证的对象和一个回调函数传递给 schema 的 validate 的方法：

import Schema from 'async-validator';
const descriptor = {
  name: {
    type: 'string',
    required: true,
    validator: (rule, value) => value === 'muji',
  },
  age: {
    type: 'number',
    asyncValidator: (rule, value) => {
      return new Promise((resolve, reject) => {
        if (value < 18) {
          reject('too young');  // reject with error message
        } else {
          resolve();
        }
      });
    },
  },
};
const validator = new Schema(descriptor);
validator.validate({ name: 'muji' }, (errors, fields) => {
  if (errors) {
    // 验证失败，将所有错误返回到一个数组
    return handleErrors(errors, fields);
  }
  // 验证通过
});
 
// Promise 用法
validator.validate({ name: 'muji', age: 16 }).then(() => {
  // 通过验证并没有错误信息
}).catch(({ errors, fields }) => {
  return handleErrors(errors, fields);
});

接下来我们来介绍一些常用的 API。

Rules 是可以执行验证的函数。

import Schema from 'async-validator'
const validator = new Schema(descriptor)
validator.validate({ name: 'Firstname' }, (errors, fields) => {
  if (errors) {
    return handleErrors(errors, fields);
  }
  // validation passed
});

Required 是 rule 属性指示要验证的源对象上必须存在的字段。
Pattern 是 rule 属性必须匹配才能通过验证的正则表达式。
Range 是定义属性的使用范围。对于字符串和数组，根据长度比较；对于数字，则是不能小于 min ，也不能大于 max。
Enumerable：要验证的值是使用枚举类型和列车字段的有效枚举属性。

const descriptor = {
  role: { type: 'enum', enum: ['admin', 'user', 'guest'] },
};

Messages: 支持 i18n 可以定

message 是 any 类型，支持 jsx：

{ name: { type: 'string', required: true, message: '<b>Name is required</b>' } }

message 也可以是函数，例如，使用 vue-i18n：

 { name: { type: 'string', required: true, message: () => this.$t( 'name is required' ) } }

asyncValidator：自定义指定字段的异步校验函数。

const fields = {
  asyncField: {
    asyncValidator(rule, value, callback) {
      ajax({
        url: 'xx',
        value: value,
      }).then(function(data) {
        callback();
      }, function(error) {
        callback(new Error(error));
      });
    },
  },
 
  promiseField: {
    asyncValidator(rule, value) {
      return ajax({
        url: 'xx',
        value: value,
      });
    },
  },
};

validator：指定字段自定义验证函数。

const fields = {
  field: {
    validator(rule, value, callback) {
      return value === 'test';
    },
    message: 'Value is not equal to "test".',
  },
 
  field2: {
    validator(rule, value, callback) {
      return new Error(`${value} is not equal to 'test'.`);
    },
  },
 
  arrField: {
    validator(rule, value) {
      return [
        new Error('Message 1'),
        new Error('Message 2'),
      ];
    },
  },
};