输入空白空间可以启用角度形式的提交按钮如何修剪和验证答案

【问题标题】：Entering empty space enables the submit button in angular form how to trim and validate输入空白空间可以启用角度形式的提交按钮如何修剪和验证
【发布时间】：2015-11-30 13:53:14
【问题描述】：

我有一个表单，在这个表单中我需要验证密码字段。在我的表单字段中，如果我只输入一个空白区域，submit 按钮就会启用。那么如何预防这种情况呢？

我还想对照我的密码字段检查“重新输入”密码字段，如何比较两者？

一旦它们都正确，我想启用提交按钮。甚至我可能需要限制用户在密码字段中输入最少 6 个字符。

目前我没有收到任何错误。

她是我的密码：

<form name="myForm" novalidate ng-submit="myFormDetails(userInfo)">

      <label for="password">
        Enter Password
        <input type="password" name="password" ng-model="userInfo.password" id="password" required>
        <span class="error"  
          ng-show="myForm.password.$dirty && myform.password.$invalid">
            Please Provide Valid Password
          </span>
      </label>

      <label for="password">
        Re-Enter Password
        <input type="password" name="repassword" id="repassword" ng-model="userInfo.repassword" required>
        <span class="error" 
        ng-show="myForm.repassword.$dirty && myform.repassword.$invalid">
          Password not matching
      </span>
      </label>
      <label for="submit">
        <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
      </label>
    </form>

Live Demo

【问题讨论】：

错字：myform 应该是 myForm，在多个地方

标签： angularjs forms

【解决方案1】：

您可以使用 ng-pattern 提供一个排除空格的正则表达式：

ng-pattern="/^[^\s]+$/"

然后将此添加到 ng-show 以确保密码相同：

ng-show="myForm.repassword.$dirty &&
      (userInfo.password != userInfo.repassword || !myForm.repassword.$valid)"

Plunker：http://plnkr.co/edit/cDbTN8x8bSl03NkpGWhO

【讨论】：

我想如果你添加一个ng-minlength 这是一个完整的答案！
另外，不需要在第二个密码字段上添加正则表达式模式检查，因为它与主密码字段进行了比较

【解决方案2】：

您可以简单地为您的 ng-disabled 参数添加检查。我个人更喜欢在控制器中使用函数，这使得模板更易于阅读，因为其中应该有尽可能少的逻辑。

this.isInvalid = function() {
    var myForm = $scope.myForm;
    var valid = myForm.$valid;
    valid = valid && myForm.password.$modelValue.trim().length > 0;
    valid = valid && myForm.repassword.$modelValue.trim().length > 0;
    valid = valid && myForm.password.$modelValue.trim() === myForm.repassword.$modelValue.trim();

    return !valid;
};

我已经把你的 plunker 分成了这个： http://plnkr.co/edit/qaWaXxnCi63uCS8oLyB1?p=preview

【讨论】：