Javascript jQuery检查是否填写了4个字段

我正在处理一个包含4个字段的表单，我直接对其进行验证。因此，如果一个字段填写正确，我给这个字段以绿色边框为例。但是现在我想做一个检查，如果所有的字段都已填写，然后我会显示一条消息

我的想法是首先为每个字段创建一个函数，如下所示。然后检查4个函数是否返回true。但这不起作用，所以我首先检查一个函数（在本例中是“宽度”字段），如果它们匹配，就会返回警报。但这也不行，所以我现在不能再继续了

谁能先帮我把这个功能做好吗

（配置步骤宽度是一个id为“width”的输入字段）

我的代码片段：

jQuery（文档）.ready（函数（$）{
//验证文本字段
$（“#配置步骤#宽度，#配置步骤#高度”）。on（'input'，function（）{
var输入=$（此）；
var width=input.val（）；
if（width.match（/^\d+$/）{
input.removeClass（'invalid'）。addClass（'valid'）；
input.parents（'li'）。find（'step number'）。removeClass（'unvalid-step'）。addClass（'valid-step'）；
}否则{
input.removeClass（'valid'）。addClass（'invalid'）；
input.parents（'li'）。find（'.step number'）。removeClass（'valid-step'）。addClass（'unvalid-step'）；
}
});
//验证选择框
$（“#配置步骤#类型”）.change（函数（）{
变量slct=$（此）；
var type=slct.val（）
如果（类型）{
slct.parents（'li'）。find（'step number'）。removeClass（'unvalid-step'）。addClass（'valid-step'）；
}否则{
slct.parents（'li'）。find（'.step number'）。removeClass（'valid-step'）。addClass（'unvalid-step'）；
}
});
//检查所有填写的字段。
函数检查_字段（）{
函数validate_width（）{
var width=$（“#配置步骤#宽度”）.val（）；
if（width.match（/^\d+$/）{
警报（“测试”）；
}否则{
返回false；
}
}
}
});
。有效{
背景：#f7fff7！重要；
边框：1px实心#459b40！重要；
}
.无效{
背景：#fff7f7！重要；
边框：1px实心#ff0000！重要；
}
.清楚{
明确：两者皆有；
}
#配置步骤li:n个子项（奇数）{
背景#f6f8f9；
}
#配置步骤li{
边框底部：1px实心#e1e6ea；
填充：20px；
列表样式：无；
}
#配置步骤li.步骤编号{
颜色：#FFF；
字体大小：16px；
显示：内联块；
背景#f08f02；
边框：1px实心#d98c1a；
填充：8px 11px；
字体大小：粗体；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
浮动：左；
最小宽度：8px；
文本对齐：居中；
边际：0 15px 0 0；
-moz盒阴影：插入0px 0 1px#FFF；
-webkit盒阴影：插入0px 0 1px#FFF；
盒影：插入0px 0 1px#FFF；
}
#配置步骤li.valid步骤{
背景：#55ad50；
边框：1px实心#2b8825；
}
#配置步骤li.unvalid步骤{
背景#ed7171；
边框：1px实心#cf0000；
}
#配置步骤li.步骤说明{
字体大小：14px；
浮动：左；
填充：10px0；
}
#配置步骤li.step操作{
浮动：对；
}
#配置步骤li.step action.textfield{
背景：#f1f9ff；
边框：1px实心#9eabb6；
填充：7px；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：2px；
}
#配置步骤li.步骤操作输入[type=“text”]{
宽度：180px；
文本对齐：右对齐；
}
#配置步骤li.步骤操作输入[type=“text”]：焦点{
背景：#fffcf6；
边框：1px实心#f6a41d；
}
#配置步骤li。选择步骤操作{
利润率：7px 3px 0；
}


一,
宽度（mm）


二,
高度（mm）


三,
玻璃类型（mm）

--选择玻璃类型--
垫子
有光泽的


使用
$（“#宽度”）。更改
以进行检查

$('input,select').change(function(){
var width = $("#config-steps #width").val();
var height = $("#config-steps #height").val();
var size = $("#config-steps select").val();

    if (width.match(/^\d+$/)&&height.match(/^\d+$/)&&size.match(/^\d+$/)) {
        alert('Well done!');
    } else {
        return false;

  }
});

更新如下：


jQuery（文档）.ready（函数（$）{
//验证文本字段
$（“#配置步骤#宽度，#配置步骤#高度”）。on（'input'，function（）{
var输入=$（此）；
var width=input.val（）；
if（width.match（/^\d+$/）{
input.removeClass（'invalid'）。addClass（'valid'）；
input.parents（'li'）。find（'step number'）。removeClass（'unvalid-step'）。addClass（'valid-step'）；
}否则{
input.removeClass（'valid'）。addClass（'invalid'）；
input.parents（'li'）。find（'.step number'）。removeClass（'valid-step'）。addClass（'unvalid-step'）；
}
});
//验证选择框
$（“#配置步骤#类型”）.change（函数（）{
变量slct=$（此）；
var type=slct.val（）
如果（类型）{
slct.parents（'li'）。find（'step number'）。removeClass（'unvalid-step'）。addClass（'valid-step'）；
}否则{
slct.parents（'li'）。find（'.step number'）。removeClass（'valid-step'）。addClass（'unvalid-step'）；
}
});
//检查所有填写的字段。
$（'input，select'）。更改（函数（）{
var width=$（“#配置步骤#宽度”）.val（）；
var height=$（“#配置步骤#高度”）.val（）；
变量大小=$（“#配置步骤选择”）.val（）；
if（width.match（/^\d+$/）和height.match（/^\d+$/）和size.match（/^\d+$/））{
警惕（“干得好！”）；
}否则{
返回false；
}
});
});
。有效{
背景：#f7fff7！重要；
边框：1px实心#459b40！重要；
}
.无效{
背景：#fff7f7！重要；
边框：1px实心#ff0000！重要；
}
.清楚{
明确：两者皆有；
}
#配置步骤li:n个子项（奇数）{
背景#f6f8f9；
}
#配置步骤li{
边框底部：1px实心#e1e6ea；
填充：20px；
列表样式：无；
}
#配置步骤li.步骤编号{
颜色：#FFF；
字体大小：16px；
显示：内联块；
背景#f08f02；
边框：1px实心#d98c1a；
填充：8px 11px；
字体大小：粗体；
-webkit边界半径：2px；
-moz边界半径：2px；
check_field();

function validate_width() {
    var error = 0;
    $("#width, #height, #type").each(function () {
        if (!$(this).val().match(/^\d+$/)) {
            error++;
        }
    });
    if (!error){
        alert("Everything's fine!");
    }    
}