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"

相关推荐
Olrookie3 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
duansamve3 小时前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
专注VB编程开发20年4 小时前
B.NET编写不阻塞UI线程的同步延时
ui·.net·vb.net·doevents
java_强哥6 小时前
vue3-tree-org实现组织架构图展示
vue
渡我白衣12 小时前
未来的 AI 操作系统(三)——智能的中枢:从模型到系统的统一
人工智能·深度学习·ui·语言模型·人机交互
huangyiyi6666614 小时前
轮询那些事儿
javascript·前端框架·vue·js
七仔的博客15 小时前
博客的加载速度和大小的优化、优化再优化
vue·博客·优化·gzip·live2d
Element_南笙1 天前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
SmartSoftHelp开发辅助优化1 天前
C# WinForm 编程高手:程序,进程,线程。程序,窗体,UI,后台。是如何协调工作的?深度解析>SmartSoftHelp魔法精灵工作室
microsoft·ui·c#
duandashuaige1 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html