本文详细介绍了如何在Ant Design Vue中实现表单字段的自定义验证规则，包括数字长度验证、金额格式验证和正整数验证等，确保用户输入的数据符合特定格式和要求。
label='num'
>
v-decorator="['num', validateRulesObj.num]"
placeholder="请输入"/>
export default {
data () {
return {
validateRulesObj: { // 自定义校验
num: {
// 账号或者卡号 必填 长度8-28 以数字开头
rules: [
{
required: true,
validator: (rule, value, cbfn) => {
if (!value) {
cbfn('请输入num')
} else if (!value.trim().length) {
cbfn('请输入num')
} else if (value.trim().length < 8 || value.trim().length > 28) {
cbfn('请输入正确格式的 num')
} else if (isNaN(value.substring(0, 1) - 0)) {
cbfn('请输入正确格式的 num')
}
cbfn()
}
}
]
}
}, // 输入框校验规则
money: { // 金额 必填 数字 限制大小 小数点后只能两位小数
rules: [
{
required: true,
validator: (rule, value, cbfn) => {
if (!value) {
cbfn('请输入金额')
} else if (!value.trim().length) {
cbfn('请输入金额')
} else if (isNaN(value)) {
cbfn('请输入正确的金额')
} else if (Number(value) > Number(this.avalible)) {
cbfn('金额已超出可用金额')
} else if (value.indexOf('.') > -1 && value.toString().split('.')[1].length > 2) {
cbfn('请输入正确的提现金额，小数点后保留两位数字')
}
cbfn()
}
}
]
}
}
}
}
validateRulesObj: {
type: {
rules: [
{
required: true,
message: '请选择'
}
]
},
price: {
rules: [
{
required: true,
validator: function (rule, value, cbfn) {
// let reg = /^\d+$|^\d+\.\d+$/ // 可以0开头
let reg = /^[1-9][0-9]*$|^[1-9][0-9]*\.\d+$/ // 不能0开头
if (!value.trim().length) {
cbfn('请填写价格')
} else if (!reg.test(value.trim())) {
cbfn('请填写价格，为大于等于0的数字')
}
cbfn()
}
}
]
},
quantity: {
rules: [
{
required: true,
validator: function (rule, value, cbfn) {
// let reg = /^\+?[1-9][0-9]*$/ // 正整数 可输入加号
let reg = /^[1-9][0-9]*$/ // 正整数
if (!value.trim().length) {
cbfn('请填写数量')
} else if (!reg.test(value.trim())) {
cbfn('请填写数量，为大于等于0的整数')
}
cbfn()
}
}
]
}
}, // 输入框校验规则
validateRulesObj: {
tradeAmount: {
rules: [
{
required: true,
validator: (rule, value, cbfn) => {
if (!value) {
cbfn('请输入提现金额')
} else if (!value.trim().length) {
cbfn('请输入提现金额')
} else if (isNaN(value)) {
cbfn('请输入正确的提现金额')
} else if (Number(value) > Number(this.avalibleAmount)) {
cbfn('提现金额已超出可用金额')
} else if (value.indexOf('.') > -1 && value.toString().split('.')[1].length > 2) {
cbfn('请输入正确的提现金额，小数点后保留两位数字')
}
cbfn()
}
}
]
}
}
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
