如何在js中的单个函数中验证多个字段

时间:2016-07-04 16:48:32

标签: javascript jquery validation

我有一个需要验证多个文本字段的功能,但似乎无法正确完成。例如,我使用$("#textfield").blur(validation);来在每个字段失去焦点时运行验证函数(所有三个字段都使用blur调用验证函数)。我想我没有正确地排序if语句。此外,如果您知道使用this进行验证的更简单方法,那也很棒。谢谢。

function validation(height,width,color){

if (height.length == 0 || height == null){ //check for empty field
  $("#msg").html("This field cannot be empty");
}
else if (isNaN(height)){ //check that height is a number
  $("#msg").html("The height must be a number"); 
}else{
  $("#msg").html("The height is " + height); //if height is ok shows this message
}
if (width.length == 0 || width== null){  //same for width
  $("#msg").html("This field cannot be empty");
}
else if (isNaN(width)){
  $("#msg").html("The width must be a number");
}else{
  $("#msg").html("The width is " + width);
}
if (color.length == 0 || color == null){
  $("#msg").html("This field cannot be empty");
}
else if (color == "white" || color == "grey"){ //check that color is one of these two options
  $("#msg").html("The color is " + color);
}else{
  $("#msg").html("The color must be white or grey");
}

}

2 个答案:

答案 0 :(得分:1)

建议首先检查null,然后检查.length === 0

至少你可以制作一个可重复使用的isNullOrEmpty函数 -

   function isNullOrEmpty (obj) {
         return !((obj !== undefined) && (obj !== null) && (obj .length === 0));
    }

然后你可以概括为 -

function validateNumber(obj ,fieldName) {
    if(isNaN(obj)) {
        return 'The ' + fieldName + ' must be number.'
    }
    return '';
}

答案 1 :(得分:1)

您也可以使用if(!height) { $("#msg").text("Height is not defined") }。这代表false,undefined,NaN,零和字符串空值