Javascript 即使输入只包含空格，JQuery验证也会接受

验证输入字段是否只包含空格时遇到问题。我已经为必填字段指定了必填规则，但如果只键入空格，它仍然有效。此外，用户名字段的noSpace规则似乎不起作用。它禁用对其他字段的验证。这是我的标记

<form method=post class="form-auth-small" action="../php/controller/registration_controller.php">
  <div class="form-group row m-t-10px">
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>RANK: </h5></label>
      <select class="form-control" name="rank" required="required">
        <option value="rank1">NUP</option>
        <option value="rank2">PO1</option>
        <option value="rank3">PO2</option>
        <option value="rank4">PO3</option>
        <option value="rank5">SPO1</option>
        <option value="rank6">SPO2</option>
        <option value="rank7">SPO3</option>
        <option value="rank8">SPO4</option>
        <option value="rank9">PINSP</option>
        <option value="rank10">PSINSP</option>
        <option value="rank11">PCINSP</option>
        <option value="rank12">PSUPT</option>
        <option value="rank13">PSSUPT</option>
        <option value="rank14">PCSUPT</option>
        <option value="rank15">PDIR</option>
        <option value="rank16">PDDG</option>
        <option value="rank17">PDG</option>
      </select>
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>USERNAME: </h5></label>
      <input class="form-control" name="username" placeholder="Username must only contain characters [A-Z] and numbers [0-9]" type="text" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>FIRST NAME: </h5></label>
      <input class="form-control" name="fname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>PASSWORD: </h5></label>
      <input class="form-control" name="pwd" placeholder="Choose a strong password" type="password" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>MIDDLE NAME: </h5></label>
      <input class="form-control" name="mname" type="text" minlength="1" required="required">
    </div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>EMAIL: </h5></label>
      <input class="form-control" name="email" type="email" minlength="1" required="required">
    </div>
    <div class="clearfix"></div>
    <div class="col-sm-6 text-left m-b-5px">
      <label><h5>LAST NAME: </h5></label>
      <input class="form-control" name="lname" type="text" minlength="1" required="required">
    </div>
  </div>
  <div class="form-group clearfix m-b-5px">
    <button type="submit" name="btnRegister" class="btn btn-primary btn-lg btn-block">REGISTER</button>
  </div>
  <div class="bottom m-b-15px">
    <span><i class="fa fa-lock"></i> <a href="login.php">Already have an account? Sign in.</a></span>
  </div>
</form>

排名：
努普
PO1
PO2
磷酸
血氧饱和度
血氧饱和度
血氧饱和度
SPO4
品脱
PSINSP
PCINSP
PSUPT
PSSUPT
PCSUPT
PDIR
PDDG
PDG
用户名：
名字：
密码：
中名：
电邮：
姓氏：
登记

JS（无noSpace规则）

$（文档）.ready（函数（）{
$（'.form auth small'）。验证({
规则：{
排名：{
必填项：true
},
用户名：{
要求：正确，
最小长度：3
},
fname：{
必填项：true
},
mname：{
必填项：true
},
名称：{
必填项：true
},
pwd：{
必填项：true
},
电邮：{
必填项：true
}
},
错误元素：“em”，
errorPlacement:函数（错误，元素）{
//将'help block'类添加到error元素
错误。addClass（“帮助块”）；
//将“has feedback”类添加到父div.form-group
//为了向输入添加图标
元素。父元素（“.col-sm-5”）。添加类（“有反馈”）；
错误。插入符（元素）；
//添加span元素（如果不存在），并对其应用图标类。
如果（！element.next（“span”）[0]）{
$（“”）。插入后面的（元素）；
}
},
成功：功能（标签、元素）{
//添加span元素（如果不存在），并对其应用图标类。
if（！$（元素）.next（“span”）[0]）{
$（“”）之后插入（$（元素））；
}
},
突出显示：函数（元素、errorClass、validClass）{
$（元素）.parents（.col-sm-6”）.addClass（“有错误”）.removeClass（“有成功”）；
$（元素）.next（“span”）.addClass（“glyphicon移除”）.removeClass（“glyphicon确定”）；
},
取消高亮显示：函数（元素、errorClass、validClass）{
$（元素）.parents（.col-sm-6”）.addClass（“has success”）.removeClass（“has error”）；
$（元素）.next（“span”）.addClass（“glyphicon ok”）.removeClass（“glyphicon移除”）；
}
});
});

---

提前谢谢你

只需在jQuery验证函数运行之前添加此方法：：

jQuery.validator.addMethod("noSpace", function(value, element) { 
    return value.indexOf(" ") < 0 && value != ""; 
  }, "No space please and don't leave it empty");

对于您想要的每个字段。

试试这个

$(document).ready(function() {
  jQuery.validator.addMethod("noSpace", function(value, element) { 
     return value.indexOf(" ") < 0 && value != ""; 
}, "No space");


$(".form-auth-small").validate({
   rules: {
      username : {
          noSpace: true
      }
   }
  });


})

$（文档）.ready（函数（）{
addMethod（“noSpace”，函数（值，元素）{
返回值.indexOf（“”<0&&value！=“”）；
}“无空间”）；
$（“.form auth small”）.validate({
规则：{
用户名：{
noSpace：对
}
}
});
})

您是否尝试过

noSpace:true

？@Tumen\t是的，我尝试过。除非我的实现是错误的。当我将其添加到minlength:3字段（用逗号分隔）的正下方时，它禁用了对其他字段的验证。该字段中的值如何。。如果它仍然是空的。。那会发生什么？@b维尔尤小子，我不认为我应该那样做。我会试试这个。一次两个都试试。好的，我会的。非常感谢。我成功了谢谢你！这两种方法我都得做。我接受你的回答，因为你先发了。我能问一下吗？如何使它只允许在开始和结束处使用空格，而不允许在字符之间使用空格？请看这个演示。它几乎和你拥有的一样。这很有效，谢谢。但这和拉娜的答案是一样的。我不得不接受他的回答，因为他两分钟前就发布了。请添加一些解释，即使代码是解释性的。

noSpace: true

$(document).ready(function() {
  jQuery.validator.addMethod("noSpace", function(value, element) { 
     return value.indexOf(" ") < 0 && value != ""; 
}, "No space");


$(".form-auth-small").validate({
   rules: {
      username : {
          noSpace: true
      }
   }
  });


})

$(".form-auth-small").validate({
   rules: {
      username : {
          required: true,
          normalizer: function(value) {
                return $.trim(value);
            }
      }
   }
  });