51dev.com IT技术开发者社区

51dev.com 技术开发者社区

validate插件验证错误显示为红色

IT猿阅读(20)2019-12-03 收藏0次评论

问题

validate实现表单验证的时候,提示错误信息显示为黑色,并且输入框也不显示错误提醒,百度了很多的方法后,找到了一个简明而且易于实现的方法。

解决思想

用css样式实现对提示框的样式绑定,从而将提示语和提示框显示为红色。

实现代码

input.error { border: 1px solid red; }
label.error {
	font-weight: bold;
	color: red;
}

解释css代码
input.err:
错误的input输入框,对输入框进行css绑定,绑定边框为1像素红色的实线。
label.error:
validate内部实现提示的原理,是在原本的input上加一个lable标签,从而我们可以通过控制label标签的样式,来控制提示语的样式,样式显示为红色加粗。

实现效果图

以上就是validate插件验证错误显示为红色的全部内容。