Javascript 验证表单JS

我有3个输入字段，需要在字段通过时验证并启用按钮（更改颜色），但在未通过时标记错误。 我一直使用表单js，这是一个大型的外部文件表单。 有没有更为定制的方法来实现这一点？例如，做一个字段可以让我开始。这是我的密码：

!函数（$）{
$.fn.formvalidator=函数（选项）{
函数toggleButton（）{
options.alwaysActive | | |（validateAllRequiredField（）？$（form）.find（“：submit”）.removeAttr（“disabled”）：$（form.find（：submit”）.attr（“disabled”，“disabled”）；
}
函数validateAllRequiredField（文本）{
变量填充=！0，淋浴文本=淋浴文本| |！1；
return$（form+“input[mandatory=true]，“+form+”select[mandatory=true]”。每个函数（）{
变量字段=$（此），isValid=！0；
if（“输入”==field.get（0.nodeName.toLowerCase（））{
如果（“文本”==field.attr（“类型”）| |“密码”==field.attr（“类型”））{
如果（！field.hasClass（“必填”）| |“”！=field.val（）.trim（）和&field.val（）.toLowerCase（）！=field.attr（“labeltext”）.toLowerCase（）| |（填充=！1，
isValid=！1），“password”==field.get（0）.键入&&“false”！=field.attr（“lengthCheck”）&&&（field.val（）.length<5 | | field.val（）.length>20）&（filled=！1），
field.hasClass（“emailfield”））{
var过滤器=/^[a-zA-Z0-9\-\+（\.[a-zA-Z0-9\-\+）*@[a-Z0-9]+（\-[a-Z0-9]+）*（\.[a-Z0-9]+（\-[a-Z0-9]+）*。[a-z]{2,4}$/，emailValid=filter.test（field.val（））；
emailValid | |（已填充=！1）；
}
batherRorText&！isValid&（field.val（field.attr（“labeltext”）））.addClass（“错误”），
field.hasClass（“textinputpw”）&&（field.get（0.type=“text”）；
}
}else“select”==field.get（0）.nodeName.toLowerCase（）&&&&=“select”==field.val（）&&（field.parents（.value”）.addClass（“错误”），
填充=！1）；
})，填充；
}
函数init（）{
$（表单）.submit（onSubmit），toggleButton（），bindEvents（）；
}
函数onSubmit（）{
提交前返回（）；
}
函数beforeSubmit（）{
$（form+“input.textinputpw，”+form+“input.textinput”）。每个（函数（）{
var输入=$（此）；
input.attr（“labeltext”）.toLowerCase（）==input.val（）.toLowerCase（）&&input.val（“”）；
});
var customValidationSuccess=！0；
“函数”==typeof options.onbeforesmit&&（customValidationSuccess=options.onbeforesmit（表单，选项））；
var formValidationSuccess=validateAllRequiredField（！0）；
返回customValidationSuccess&&formValidationSuccess；
}
函数bindEvents（）{
$（form+“input.textinputpw，”+form+“input.textinput”）.focus（函数（）{
var输入=$（此）；
input.closest（“.errorresponse”）.removeClass（“errorresponse”），（input.hasClass（“textinputpw”）| | input.val（）.toLowerCase（）==input.attr（“labeltext”）.toLowerCase（））和&（input.val（“”.removeClass（“error”），
input.hasglass（“textinputpw”）&&（input.get（0.type=“password”）；
}).bind（“模糊”，函数（）{
var输入=$（此）；
（“”==input.val（）| | input.attr（“labeltext”）.toLowerCase（）==input.val（）.toLowerCase（））&&&（input.hasClass（“textinputpw”）&&（input.get（0.type=“text”），
input.val（input.attr（“labeltext”）），void 0！=input.attr（“必填”）和&“true”==input.attr（“必填”）和&input.addClass（“错误”），
切换按钮（）；
}).bind（“keyup”，函数（）{
切换按钮（）；
});
}
var$this=$（this），form=$this.selector，默认值={
始终活动：！1，
onBeforeSubmit:！1
}，options=$.extend（默认值，options |{}）；
init（）；
};
}（jQuery）；

.textinput{
边框：1px实心#000；
边界半径：0；
框大小：边框框；
颜色：#6C6C；
高度：自动；
保证金：0px自动15px自动；
填充：4px0 5px10px；
宽度：100%；
字体系列：不规则，无衬线；
字体大小：正常；
字母间距：.02em；
字体大小：16px；
显示：块；
宽度：300px；
}
.表格按钮{
背景色：#000；
颜色：#fff；
显示：块；
字母间距：.02em；
字体系列：不规则，无衬线；
字体大小：13px；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
填料：1.2米2米1.2米2米；
宽度：275px；
保证金：25px自动25px自动；
边框：1px实心#000；
大纲：无；
}
.form按钮[已禁用]，
.窗体按钮[禁用]：悬停{
背景色：#d1d3d4；
颜色：#fff；
边界：0无；
}
.窗体按钮：焦点，
.窗体按钮：悬停{
背景:#f3；
颜色：#000；
边框：1px实心#F3；
-moz过渡：全部。4轻松输入输出；
-o-transition：全部。4s易于输入输出；
-webkit过渡：全部。4s易入易出；
过渡：全部。4s轻松进出；
}
.fieldLabel{
显示：块；
字体大小：13px；
字体系列：不规则，无衬线；
字母间距：.02em；
文本对齐：左对齐；
宽度：100%；
线高：17px；
}
输入[type=“checkbox”]{
显示：无；
}
输入[type=“email”]{
-webkit外观：无；
-moz外观：无；
外观：无；
}

现在进入

您能包含您尝试过的代码吗？@DarrenSweeney补充道，谢谢