naive-ui踩坑

1、表单日期范围的校验:

        UI自带校验只可以校验单个日期,不能校验选择日期范围;采用自定义校验;

//页面中
<n-form-item require-mark-placement="left" :show-feedback="mainx.check" label="计费期限 :" path="planTime">
	<n-date-picker
	    v-model:formatted-value="formx.time"
		value-format='yyyy-MM-dd'
		type="daterange"
		@update:formatted-value="mainx.onChangeTime"
		clearable
	/>
</n-form-item>


//vue.js
// 计划起止日期-效验
	let isPlanTime = function(rule, value, callback) {
		let msgs = "", infos = false;
		if (formx.time != null) {
			infos = true;
		} else {
			infos = false;
			msgs = "请选择计划起止日期";
		}
		if (infos == false) {
			callback(new Error(msgs));
		} else {
			callback();
		}
	}

let formx = reactive({
        time: null,
		planTime: null,
		startTime:'',
		endTime: '',
});
let rulesx = {
	planTime: { required: true, validator: isPlanTime, trigger: ["input", "blur"] },
};

2、校验区分数字、字符串;

        有些数字是int类型,校验时需添加 “type=number”

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值