Javascript 使用jquery进行验证的通用函数

我使用简单的代码来验证输入框是否为空，并相应地显示

检查图标

和

警告图标

你可以看到在这里工作

问题：这组代码适用于一组

标签：输入框

想象一下，如果我们在整个网站上有大量的输入控件。 我正在寻找一个相当普遍的解决方案。无需反复重复同一组HTML、CSS或JS代码。 我知道很难避免一些重复，但我想写更少重复的代码

//代码在这里
$（文件）。准备好了吗(
函数（）{
$（“#图标id”）.hide（）；
$（“#输入id”）.keyup（函数（）{
if（$（“#输入id”）.val（）.length==0）{
$（“#输入id”）.addClass（“红色边框”）；
$（“#图标id”）.addClass（“图标警告标志”）；
$（“#图标id”）.removeClass（“图标检查”）；
$（“#图标id”）.css（“颜色”、“红色”）；
$（“#图标id”）.show（）；
}否则{
$（“#输入id”）.removeClass（“redBorder”）；
$（“#图标id”）.removeClass（“图标警告标志”）；
$（“#图标id”）.addClass（“图标检查”）；
$（“#图标id”）.css（“颜色”、“绿色”）；
$（“#图标id”）.show（）；
}
});
});
正文{
利润率：20px；
}
.输入容器{
宽度：250px；
位置：相对位置；
}
.我的意见{
宽度：100%；
}
.我的偶像{
位置：绝对位置；
右：0px；
颜色：红色；
顶部：8px；
}
雷德博德先生{
边框：1px纯红！重要；
}


//代码在这里
$（文件）。准备好了吗(
函数（）{
$（“.icon id”）.hide（）；
$（“.input id”）.keyup（函数（）{
if（$（this）.val（）.length==0）{
$（此）.addClass（“红色边框”）；
$（this.parentElement）.find（#icon id”）.addClass（“图标警告标志”）；
$（this.parentElement）.find（#图标id”）.removeClass（“图标检查”）；
$（this.parentElement）.find（#icon id”）.css（“color”，“red”）；
$（this.parentElement）.find（“#icon id”）.show（）；
}否则{
$（this.removeClass（“redBorder”）；
$（this.parentElement）.find（#icon id”）.removeClass（“图标警告标志”）；
$（this.parentElement）.find（#图标id”）.addClass（“图标检查”）；
$（this.parentElement）.find（“#icon id”）.css（“颜色”、“绿色”）；
$（this.parentElement）.find（“#icon id”）.show（）；
}
});
});
正文{
利润率：20px；
}
.输入容器{
宽度：250px；
位置：相对位置；
}
.我的意见{
宽度：100%；
}
.我的偶像{
位置：绝对位置；
右：0px；
颜色：红色；
顶部：8px；
}
雷德博德先生{
边框：1px纯红！重要；
}

让它成为jQuery插件：
我将属性data validate添加到您的
中，这样我就可以使用
$（“[data validate]”）调用插件了

代码：


；（函数（$，窗口，文档，未定义）{
“严格使用”；
var pluginName=“customValidator”，
默认值={
propertyName:“值”
};
函数插件（元素、选项）{
this.element=元素；
this.settings=$.extend（{}，默认值，选项）；
这是默认值；
这个。_name=pluginName；
this.init（）；
}
$.extend（Plugin.prototype{
init:function（）{
var$input=$（this.element）；
var$icon=$input.parent（）.find（'.my icon'）；
$icon.hide（）；
$input.keyup（函数（）{
if（$input.val（）.length==0）{
$input.addClass（“红色边框”）；
$icon.addClass（“图标警告标志”）；
$icon.removeClass（“图标检查”）；
$icon.css（“颜色”、“红色”）；
$icon.show（）；
控制台日志（“空”）；
}否则{
$input.removeClass（“红色边框”）；
$icon.removeClass（“图标警告标志”）；
$icon.addClass（“图标检查”）；
$icon.css（“颜色”、“绿色”）；
$icon.show（）；
控制台日志（“非空”）；
}
});
},
} );
$.fn[pluginName]=函数（选项）{
返回此值。每个（函数（）{
if（！$.data（这是“plugin_u”+pluginName））{
$.data（这是“plugin_u2;”+
pluginName，新插件（这个，选项））；
}
} );
};
}）（jQuery、窗口、文档）；
$（“[data validate]”）。customValidator（）
正文{
利润率：20px；
}
.输入容器{
宽度：250px；
位置：相对位置；
}
.我的意见{
宽度：100%；
}
.我的偶像{
位置：绝对位置；
右：0px；
颜色：红色；
顶部：8px；
}
雷德博德先生{
边框：1px纯红！重要；
}

您可以使用类
我的输入
和
我的图标
而不是ID

在
键控
侦听器中，您可以使用
$（此）
引用
我的输入
和
$（此）。下一步（）
引用
我的图标
，因为图标是
输入
的相邻同级

为了简洁起见，还可以像这样链接您的函数：

$(this).next().removeClass("icon-warning-sign")
    .addClass("icon-check")
    .css("color", "green")
    .show();

请参见下面的演示：


//代码在这里
$（文档）.ready（函数（）{
$（“.my icon”）.hide（）；
$（“.my input”）.keyup（函数（）{
if（$（this）.val（）.length==0）{
$（此）.addClass（“红色边框”）；
$（this）.next（）.addClass（“图标警告标志”）
.removeClass（“图标检查”）
.css（“颜色”、“红色”）
.show（）；
}否则{
$（this.removeClass（“redBorder”）；
$（this）.next（）.removeClass（“图标警告标志”）
.addClass（“图标检查”）
.css（“颜色”、“绿色”）
.show（）；
}
});
});
正文{
利润率：20px；
}
.输入容器{
宽度：250px；
位置：相对位置；
}
.我的意见{
宽度：100%；
}
.我的偶像{
位置：绝对位置；
右：0px；
颜色：红色；
顶部：8px；
}