项目场景：

知识产权模块

问题描述

给输入框加校验规则

解决方案：

模板中规则绑定 :rules=“rulesupload”

<a-form-model :model="uploadForm" v-bind="formItemLayout" ref="uploadForm" :rules="rulesupload">
<a-form-model-item label="合同名称" prop="name">
<a-textarea v-model="uploadForm.name" auto-size :disabled="disabled" />
</a-form-model-item>
<a-form-model-item label="合同金额(元)" prop="money">
<a-textarea auto-size v-model="uploadForm.money" :disabled="disabled" />
</a-form-model-item>
</a-form-model>

1.在src下的utils下新建validate.js文件

/**
* 金额
* @param {*} s
*/
export const validateNumber = (rule, value, callback) => {
let numberReg = /^d+$|^d+[.]?d+$/
if (value !== '') {
if (!numberReg.test(value)) {
callback(new Error('请输入数字'))
} else {
callback()
}
} else {
callback(new Error('请输入值'))
}
}

2.vue页面中引入

import { validateNumber } from '@/utils/validate'

3.在export default中定义rule规则，使用语法：{validator:验证方法,trigger:验证触发}

data() {
return {
rulesupload: {
name: [
{ required: true, message: '不能为空', trigger: ['change', 'blur'] },
{ min: 1,max: 50,message: "输入不能超过50个字符",trigger: "blur"}],
money: [
{ required: true, message: '不能为空', trigger: ['change', 'blur'] },
{ validator: validateNumber, trigger: 'blur' }
],
},
}
}
methods：{
// 编辑提交
onEditupload() {
this.$refs.uploadForm.validate((valid) => {
if (valid) {
...//正常提交流程
}
})
},
}

规则参考：https://www.cnblogs.com/lieone/p/11856330.html

校验规则集合：https://www.cnblogs.com/lieone/p/11856330.html

只能输入正整数：https://blog.csdn.net/weixin_29235525/article/details/113323768

最后

以上就是丰富麦片为你收集整理的VUE+antd-ui使用rules做form表单的校验项目场景：问题描述解决方案：的全部内容，希望文章能够帮你解决VUE+antd-ui使用rules做form表单的校验项目场景：问题描述解决方案：所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。