ant-design-vue 自定义rules
时间: 2023-08-31 17:04:56 浏览: 110
antdv ant-design-vue 自定义主题颜色.pdf
如果你想为 ant-design-vue 的表单验证规则(rules)添加自定义规则,可以按照以下步骤操作:
1. 在 `antdv/src/utils/validate.js` 文件中新增自定义规则,例如:
```js
export function validateUrl(rule, value, callback) {
if (value && !/^https?:\/\/([-\w]+\.)?([-\w]+)\.\w+(\/[-\w./?%&=]*)?$/i.test(value)) {
callback(new Error('请输入正确的链接地址'))
} else {
callback()
}
}
```
2. 在你的组件中引入该自定义规则并在 rules 中使用,例如:
```vue
<template>
<a-form :form="form">
<a-form-item label="链接">
<a-input v-decorator="['link', { rules: [{ required: true, validator: validateUrl }] }]" />
</a-form-item>
</a-form>
</template>
<script>
import { validateUrl } from '@/utils/validate'
export default {
data() {
return {
form: this.$form.createForm(this)
}
},
methods: {
onSubmit() {
this.form.validateFields((err, values) => {
if (!err) {
console.log('表单数据:', values)
}
})
},
validateUrl
}
}
</script>
```
这样就可以在表单中使用自定义规则来验证用户输入的数据了。
阅读全文