Question

我想要验证一些input个字段。对于“电子邮件”输入，我已经完成了。对于“电话”输入，我写了一些代码，可以阻止用户插入字符，但它不起作用。对于“密码”输入，用户必须输入至少8个字符，包括数字。我需要，如果用户插入错误的值，输入边框将变为红色。

我该怎么办？这是我在jsfiddle.net

中的代码

代码：

app.directive('phoneNumber', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^0-9]/g, '');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

“电话”输入的代码是否阻止用户插入字符。

最好的问候

Answer 1

这是我的问题答案的链接：CodeProject

我的jsfiddle.net

中有一些变化

“PhoneNumber”的代码是：

$('#PhoneNumber').bind('keypress', function(e){
       if(e.which != 8) {
         if ((e.which < 48) || (e.which > 57 )) {
           e.preventDefault(); }
        }
      });

e.which != 8用于接受退格键。

感谢所有人

Answer 2

这就是你想要做的，在我的例子中，如果用户输入char' - '找到输入错误^^

Menu

$('input[type="text"]').keyup(function() {
  if($('input[type="text"]').val().indexOf("-") != -1){
  $(this).css('border-color', 'red');
}
});

修改

这样，您将删除错误的字符

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"><br>

$('input[type="text"]').keyup(function() { if($('input[type="text"]').val().indexOf("-") != -1){ $(this).css('border-color', 'red'); $('input[type="text"]').val($('input[type="text"]').val().replace('-','')); } });

修改

这样，您将从禁止的字符数组中删除错误的字符

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text"><br>

bannedChars = ['a','b','c','d']; $('input[type="text"]').keyup(function() { if(bannedChars.indexOf($('input[type="text"]').val().substring($('input[type="text"]').val().length-1)) != -1){ $(this).css('border-color', 'red'); $('input[type="text"]').val($('input[type="text"]').val().substring(0,$('input[type="text"]').val().length-1)); } });

Answer 3

我已更新您的代码。请检查以下代码段。

我还测试了你的手机号码数字正则表达式，它运行正常。（您可以测试正则表达式here，或使用任何其他在线正则表达式工具。）

＆＃13;

var app = angular.module("myApp",[]);
  app.controller("myCtrl", function($scope){
    
    $scope.passwordVal = /^[a-zA-Z1-9 ]{8,}$/; // Password Pattern
  });

＆＃13;

input {
    padding: 8px 20px;
    margin: 8px 5px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 4px;
}
 input.invalid {
   border-color:red !important;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" >
   
  Phone: <input type="text" name="my_phone" placeholder="Enter Your Phone" ng-model="phone" ng-pattern="/^.{11}$/" style="margin:8px 28px;" 
  ng-class="{'invalid': myForm.my_phone.$error.pattern }"  ><br>
  
  Password: <input type="password" placeholder="Enter Your Password"  name="my_password"  ng-class="{'invalid': myForm.my_password.$error.pattern }" ng-model = "password" ng-pattern="{{passwordVal}}">
  </form></div>

＆＃13;

或

您可以使用ng-pattern-restrict指令以其他方式执行此操作。

从here获取图书馆，您需要在输入中添加ng-pattern-restrict，如下所示：

<input type="text" name="my_phone" placeholder="Enter Your Phone" ng-model="phone" ng-pattern="/^.{11}$/" style="margin:8px 28px;" ng-class="{'invalid': myForm.my_phone.$error.pattern }" ng-pattern-restrict >

GitHub：AlphaGit/ng-pattern-restrict

使用AngularJS验证输入

3 个答案: