Iview动态控制form验证的小红星

最新推荐文章于 2024-02-29 14:25:46 发布

原创最新推荐文章于 2024-02-29 14:25:46 发布 · 6.1k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Iview的form自定义验证

收录于

UI 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种通过动态控制表单验证中必填项的方法，使用HTML、CSS和JavaScript实现小红星标记必填字段，并根据布尔变量决定是否进行验证。

1、动态控制form验证的小红星

<!--HTML部分：-->
<FormItem :class="{requireStar:bankFlag1}">

/*CSS部分：*/
/*动态必填项className*/
.requireStar .ivu-form-item-label:before{
	content: '*';
	display: inline-block;
	margin-right: 4px;
	line-height: 1;
	font-family: SimSun;
	font-size: 12px;
	color: #ed4014;
}

//Javascript部分：
//bankFlag1是boolean值为根据你的需求控制ture或者false，在验证上加上bankFlag1变量实现js验证的同步，如果bankFlag1值为false则不校验。
//自定义验证方法：
const c = (rule, value, callback) => {
	if (!value && this.bankFlag1) {
		return callback(new Error('这是必填选项。'));
	} else {
		return callback();
	}
};