一、jqueryvalidate插件简介
听过表单验证没？网上很多地方都要用到。不怕，我们给你推荐个神奇插件——jQueryValidate，让你轻轻松松搞定验证规则。想要试试看吗？直接去官网学习！
你知道吗？如果jqueryvalidate插件代码出问题了，那些出错的地方就会变成红色，还会有详细的提示告诉你哪里错了，真的很方便。但是有的时候，有人可能觉得红色太刺眼了，想要换回原来的样子。这个时候，只需要把highlight和unhighlight这两个参数设置为空函数就行！这样的话，无论是出错还是修正，框框的颜色都不会变~
三、自定义错误提示方式
$("form").validate({
highlight: function(element) {
// do nothing
},
unhighlight: function(element) {
// do nothing
}
});
提示！别忘了，把那个默认的错误信息关了后，JQueryValidate这个小工具还能让你随心所欲定制错误提醒，轻轻松松就搞定了，是不是很省事？比如说，想放哪就放哪，怎么显示，全凭你高兴。
四、使用CSS样式控制
除了jQueryValidate这个让输入框看起来更酷的玩意儿，其实还有别的方法，那就是CSS！只需调整几个特殊的CSS属性，当你输错时，那个红点就会变成你想要的图案。但请放心，框边的颜色不会变~这个方法超级简单，尤其适合对美观度要求不太高的情况。
五、结合多种方法实现
你是不是琢磨着如何让那个框不再是红色的？没事儿，我来教你几个小技巧轻松搞定它！首先，你得关闭那个默认的错误提示。这样就能避免很多麻烦事儿了。当然如果真的出了问题，自己动手设个提醒或者调整下CSS也是完全可以的。这样以后再遇到什么状况就不用担心。
$("form").validate({
errorPlacement: function(error, element) {
// 自定义错误提示信息位置
error.appendTo(element.parent());
},
showErrors: function(errorMap, errorList) {
// 自定义错误提示信息显示
var error = errorList[0];
var element = $(error.element);
element.addClass("error");
element.next(".error-message").text(error.message);
}
});
六、注意事项与建议
用jQueryValidate查表单，得注意几个小细节。首先，错误提醒可不能去还要加点儿个人特色提示才行，这样大家一眼就能看出问题在哪里，也会学着解决。然后，给输入框上色时要注意兼容性，看看跟整个页面搭不搭。最后，输入框变红咋办？这个要看你的需求和用户体验。
七、案例分析与实战演练
防止注册表单输错变色，很简单的，就是先做个注册表单出来。如果用户填错了，别急着让框子立马变红。照着咱们之前讲过的方法来，肯定行！
八、总结与展望
input.error {
/* 输入框出错时的样式 */
/* do something here */
}
input.valid {
/* 输入框恢复正常时的样式 */
/* do something here */
}
哈喽，跟大家聊聊咋样让网页上的表单输入框不变成红色感叹号。做网页的时候，用jQueryValidate这个插件，所有问题就能搞定了。不过话说回来，科技每天都在进步，说不定哪天真能找到更简便的方法！
评论0