2015-06-12 3 views
1

У меня есть регулярное выражение для каждого поля ввода, и я хочу, чтобы все они были в одном месте - может быть в одном контроллере. Я попытался это так, и я не уверен, что это правильный способ сделать этоНесколько регулярных выражений в угловых js

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script src="${pageContext.request.contextPath}/js/Registratonvalidation.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script> 
      angular.module('myApp', []).controller("numOnlyRegex", function ($scope) 
      { 
       $scope.numOnlyRegex = /^\d{1,6}$/; 
       $scope.firstNameAndLastName = /^[a-zA-Z]{3,20}$/; 
       $scope.password= /^[a-zA-Z]{3,5}$/; 
       $scope.mobile= /^[7-9][0-9]{1,9}$/; 
       $scope.email= /\[email protected]\S+\.\S+/; 
      }); 
     </script> 
     <!--<script src="${pageContext.request.contextPath}/numOnlyRegex.js"></script>--> 
     <title>Registration Form</title> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="col-md-6 col-md-offset-3"> 
       <div class="panel panel-login"> 
        <div class="panel-body"> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <h2 class="text-muted">Registration form</h2> 
           <!--onSubmit="return validate()"--> 
           <div ng-app="myApp" ng-controller="numOnlyRegex"> 
            <form name="myForm" action="RegistrationServlet.do" method="POST" novalidate > 
             First name:<input type="text" class="form-control input-sm" name="uname" ng-pattern="/^[a-zA-Z]{3,20}/" ng-model="uname | lowercase" placeholder="First Name" required/> 
             <span style="color:red" ng-show="myForm.uname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/> 
             Last name:<input type="text" class="form-control input-sm" name="lname" ng-model="lname" name="lname | lowercase" ng-pattern="/^[a-zA-Z]{3,20}/" required placeholder="Last Name"/> 
             <span style="color:red" ng-show="myForm.lname.$error.pattern">First name cannot be less than 3 letters with no digits</span><br/> 
             <p>Password: 
              <input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd" ng-minlength="3" ng-model="pwd" required placeholder="Password"/> 
              <span style="color:red" ng-show="myForm.pwd.$error.minlength">password cannot be less than 3 letters</span><br/> 
              Confirm Password:<input type="password" class="form-control input-sm glyphicon glyphicon-ok" name="pwd2" ng-minlength="3" ng-model="pwd2" required placeholder="Confirm Password"/><br/> 
              <span style="color:red" ng-show="myForm.pwd2.$error.minlength">password cannot be less than 3 letters</span><br/> 
              Gender: <input type="radio" name="female" />Female <input type="radio" name="male" />Male <br/><br/> 
              Mobile:<input type="text" class="form-control input-sm" name="mobile" ng-pattern="/^[7-9][0-9]{1,9}$/" ng-model="mobile" required placeholder="Mobile"/> 
              <span style="color:red" ng-show="myForm.mobile.$error.pattern">Please enter a valid mobile number</span><br/> 
              Email:<input type="email" class="form-control input-sm" name="email" ng-pattern="/\[email protected]\S+\.\S+/" ng-model="email" required placeholder="Email"/> 
              <span style="color:red" ng-show="myForm.email.$error.pattern">Invalid email address</span><br/> 
              Address:<textarea class="form-control input-sm" name="address" ng-model="address" required placeholder="Address"></textarea> 
              <span style="color:red" ng-show="myForm.address.$error.require==true">Address cannot be empty</span><br/> 
              Street:<input type="text" class="form-control input-sm" name="street" ng-model="street" required placeholder="Street"/> 
              Area:<input type="text" class="form-control input-sm" name="area" ng-model="area" required placeholder="Area"/> 

              City: <select name="city" class="form-control" ng-model="city" required> 
               <option value="hyderabad">Hyderabad</option> 
               <option value="secunderabad">Secunderabad</option> 
               <option value="delhi">Delhi</option> 
               <option value="mumbai">Mumbai</option> 
              </select><br/> 
              State: <input type="text" class="form-control input-sm" name="state" ng-model="state" required placeholder="State"/> 
              Country: <input type="text" class="form-control input-sm" name="country" ng-model="country" required placeholder="Country"/> 
              Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/> 
              <span style="color:red" ng-show="myForm.pin.$error.pattern">Only six-digit number is allowed</span> 
              <input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" /> 
            </form> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>    
    </body> 
</html> 

ответ

2

Вы можете определить константы

angular.module('test').constant('regEx', { 
     numOnlyRegex: '/^\d{1,6}$/', 
     firstNameAndLastName: '/^[a-zA-Z]{3,20}$/', 
     password: '/^[a-zA-Z]{3,5}$/', 
     mobile: '/^[7-9][0-9]{1,9}$/', 
     email: '/\[email protected]\S+\.\S+/' 
    }) 

Эти константы могут быть введены в контроллеры/услуги/директивы

.controller('TestCtrl', ['$scope','regEx', function ($scope,regEx) { 
    $scope.numOnlyRegex = regEx.numOnlyRegex; 
}]) 

EDIT

С помощью констант вы можете создавать статические переменные, которые могут использоваться в других контроллерах/службах/директивах.

В вашем примере вы можете поместить все ваши обычные выражения в один постоянный объект и использовать его во всем своем приложении.

И тогда вы можете использовать его как этот

ng-pattern ожидает регулярное выражение.

От Угловой-х documentation о ng-pattern:

Устанавливает проверку шаблона ключ ошибки, если значение не совпадает с выражением шаблона в RegExp. Ожидаемое значение:/regexp/for inline шаблоны или регулярное выражение для шаблонов, определенных как выражения формы.

Другими словами, вы можете создать RegExp в контроллере:

$scope.numOnly= new RegExp(regEx.numOnlyRegex); 

и использовать его:

<input ng-model="foo" ng-pattern="numOnly"> 
+0

воах Я не понимаю немного. Извините, что я новичок в angular – kittu

+0

Я немного его обновил. Постараюсь объяснить это дальше, когда я буду дома позже :) –

+0

звучит хорошо. '$ Scope.variableName' будет отличаться для каждого регулярного выражения правильно? Ладно, не торопись. Пожалуйста, обновите. Спасибо – kittu

Смежные вопросы