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"

相关推荐
Larry_Yanan11 小时前
QML学习笔记(四十四)QML与C++交互:对QML对象设置objectName
开发语言·c++·笔记·qt·学习·ui·交互
偶尔的鼠标人13 小时前
Avalonia 的命令基类和通知基类备份
ui·mvvm·avalonia
是梦终空14 小时前
计算机毕业设计241—基于Java+Springboot+vue的爱心公益服务系统(源代码+数据库+11000字文档)
java·spring boot·vue·毕业设计·课程设计·毕业论文·爱心公益系统
Larry_Yanan15 小时前
QML学习笔记(四十五)QML与C++交互:信号槽的双向实现
c++·笔记·qt·学习·ui·交互
低调小一17 小时前
KuiklyUI 科普:UI 如何映射到 Android View 并完成渲染
android·windows·ui
张人玉19 小时前
C#WPF如何实现登录页面跳转
ui·c#·wpf
张人玉20 小时前
C#WPF如何跳转页面
笔记·ui·c#·wpf
麦麦大数据1 天前
D025 摩托车推荐价格预测可视化系统|推荐算法|机器学习|预测算法|用户画像与数据分析
mysql·算法·机器学习·django·vue·推荐算法·价格预测
猫林老师1 天前
HarmonyOS测试与上架:单元测试、UI测试与App Gallery Connect发布实战
ui·单元测试·harmonyos
七仔的博客1 天前
Vue视差标题背景
vue·博客·动画·视差