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"

相关推荐
梦起丶1 小时前
Qt 中实现系统主题感知
qt·ui·工具·qml
Java雪荷2 小时前
基于 Vant UI + Redisson BitSet 实现签到日历
java·redis·vue
晚时之秋4 小时前
vue3配置测试环境、开发环境、生产环境
前端·vue
星空你好5 小时前
cursor 编程测试,记录写一个全栈完整的crud的过程
javascript·vue·springboot·elementplus·cursor
shadowflies5 小时前
组件库TDesign的表格<t-table>的使用,行列合并以及嵌入插槽实现图标展示,附踩坑
前端·javascript·vue.js·vue·tdesign
MediaTea5 小时前
Ps:在 Photoshop 中编辑视频
ui·音视频·photoshop
weixin_18910 小时前
‌Vite和Webpack区别 及 优劣势
前端·webpack·vue·vite
鸭梨山大。13 小时前
NPM组件包 vant部分版本内嵌挖矿代码
前端·安全·npm·node.js·vue
Unity_RAIN19 小时前
Unity 战斗系统中角色UI血条设计
ui·unity·游戏引擎
小林爱1 天前
【Compose multiplatform教程08】【组件】Text组件
android·java·前端·ui·前端框架·kotlin·android studio