Uview中form表单组件表单验证，传入的数字类型在比较是会转化为字符串类型，导致比较结果不对

gis小张

于 2024-09-27 16:07:41 发布

阅读量122

点赞数 6

文章标签：前端 uniapp html javascript css

本文链接：https://blog.csdn.net/qq_45751819/article/details/142595826

版权

页面中使用u-form组件

<view class="intoNum">
				<view class="uItem">
					<u-form
					labelWidth="180rpx"
					      :model="formData"
					      :rules="rules"
					      ref="form"
					    >
					      <u-form-item
					        label="归还数量"
					        prop="returnNum"
					      >
					        <u--input
					          v-model="formData.returnNum"
					          type="number"
							  border="none"
					          placeholder="请输入数量"
					        />
					      </u-form-item>
					</u-form>
				</view>
				<view class="tobeReturn" style="color: red;">
					待归还数量<text class="num" style="color: red;">{{toBeReturnNum}}</text>
				</view>
			</view>

下面是校验规则

data(){
			return{
				baseUrl:config.baseUrl,
				wareHouseName:'',
				info:{},
				remarkText:'',
				operationType:3,
				files:'',
				fileList1:[],
				lastList:[],
				albumWidth: 0,
				toBeReturnNum:0,
				formData: {
				        returnNum: '', // 初始化为空字符串
				    },
				rules: {
				    returnNum: [
						{
				            required: true,
				            message: "请输入归还数量",
				            trigger: ['blur', 'change']
				        },
				        {
				            type: 'number',
				            message: '请输入数字',
				            trigger: ['blur', 'change']
				        },
				        {
				            validator: (rule, value, callback) => {
								console.log(3>215)
				              if (Number(value) > Number(this.toBeReturnNum)) {
				                callback(new Error(`归还数量不能大于待归还数量 ${this.toBeReturnNum}`));
				              } else if (Number(value) <= 0) {
							  // 修正：判断小于等于 0
							  callback(new Error('归还数量必须大于 0')); 
							} else {
				                callback();
				              }
				            },
				            trigger: ['blur','change']
				        }
				        ]
				      },
			}
		},

在validator校验规则中，如果是数字比较，最好做一下强制数据类型转换，