ant design vue金额校验

最新推荐文章于 2025-05-26 16:38:55 发布

lhyxm

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量696

点赞数

分类专栏： # vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_45202993/article/details/125150053

版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了如何在AntDesignVue中使用v-decorator进行表单验证，并展示了自定义校验方法`verifyJE`的实现，包括金额格式、比较校验和异常处理。验证过程涉及金额的小数位数限制、整数后输入点的检查以及与应付金额的比较。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design vue表单控件使用v-decorator进行表单校验

v-decorator="[
          'je',
          { rules: [{ required: true,validator:verifyJE }] },
 ]"

//校验方法
verifyJE(rule, value, callback){
			let curValue=Number(value)
			curValue=curValue.toFixed(2)
			let yfValue=this.form.getFieldValue('zyfje')||'无'
			let reg=/(^[1-9]{1}[0-9]*$)|(^[0-9]*\.[0-9]{2}$)/
			let lengthCheck=false
			let dotCheck=false
			if(value.indexOf('.')!=-1){ 
				if(value.split('.')[1].length>2){
					lengthCheck=true //判断小数位数
				}else if(value.split('.')[1].length==0){
					dotCheck=true //判断整数后输入点（.）的情况如（12.）
				}
			}
				if(curValue>yfValue){
					callback('金额大于该商品款项应付金额!')
				}else if(value===''){
					callback('请输入已支付金额')
				}else if(!reg.test(value)){
					callback('禁止输入汉字和特殊字符')
				}else if(yfValue==='无'){
					callback('未获取该款项应付金额!')
				}else if(lengthCheck){
					callback('小数位数超出两位')
				}else if(dotCheck){
					callback('小数位为空')
				}else{
					callback()
				}
			},