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"

相关推荐
悟道书生5 小时前
若依 RBAC 权限控制学习笔记
java·网络·笔记·sql·学习·vue
mewowaBc6 小时前
使用Pinia持久化存储实现用户认证系统
vue·pinia·用户认证系统
且随疾风前行.1 天前
Paint Cavans高级绘制:[一]Paint画笔高级应用
android·ui
唯鹿1 天前
AI生成UI代码实践(二)—— Figba 更新月记
ui·ai·figma·1024程序员节·蓝湖
gc_22991 天前
使用VS Code终端创建Vue项目报错:“npm : 无法加载文件 ...\npm.ps1,因为在此系统上禁止运行脚本”
vue·vs code
fqbqrr1 天前
2610C++,UI复合技术在窗口中绘画字体图标
c++·ui
小阿鑫1 天前
尤雨溪 : Vue 4 已经在规划中了!
vue·vite·vite+·程序员海军·vue4
离歌漠2 天前
《我用 Tauri 做了一个本地开发工具箱》
rust·typescript·vue
xy34532 天前
Axure 9.0 列表框 介绍
ui·axure·原型·产品设计
xy34532 天前
Axure 9.0 内联框架加载方式
前端·ui·html·axure·原型·产品设计