Question

我在JavaScript中编写了一个非常坚固的脚本用于密码验证，但是想要从常规JS转到角度。这很容易吗？我的代码需要在所有if语句等方面进行大量修改吗？

这是一个片段：

function passwordValidation(){
    var uname = document.getElementById("pword1").value;
    var pword = document.getElementById("cPassword").value;
    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";
    var re = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\.,\[\]_£|\`¬':\;\~{}<>()#?!\@$\%^&*-]).{8,20}$/;

    if (uname.length < 1){
        cPassword.style.backgroundColor = noBg;
        match = "";
    }else{

    if (uname == pword){
        match = "Match!";
        cPassword.style.backgroundColor = matchCol;
        cPassword.style.borderColor = matchCol;
    }else if(pword.length < 1){
        cPassword.style.backgroundColor = noBg;
        match = "";
    }
    else {
    match = "No Match!";
        cPassword.style.backgroundColor = noMatchCol;
        cPassword.style.borderColor = noMatchCol;
    }
    document.getElementById("combination").innerHTML = match;

}
}

我尝试过转换，但显然我需要绑定所有内容。

Answer 1

这是一种获取代码并将其“转换”为“Angular方式”的方法

首先，一些HTML，请注意您不需要HTML上的ID

Username: <input ng-model="someInput.password1" type='password'>
Password: <input ng-model="someInput.password2" type='password'>
<div class="messageBlock"> </div>

CSS：

.messageBlock { border: 1px solid black } // default state
.messageBlock.error { border: 1px solid red } // red border on error
.messageBlock.success { border: 1px solid green } // green border on success

JS：

// you will need to initialize a $scope variable, notice the naming between this and what's used above in ng-model (you don't put $scope in ng-model)
$scope.someInput= {};
$scope.someInput.password1= "";
$scope.someInput.password2= "";

function passwordValidation(){

    var uname = $scope.someInput.password1; // use scope variables to grab passwords
    var pword = $scope.someInput.password2;

    // Instead of what you have below, we can use validation inside the HTML markup, but I will leave some here to demonstrate both uses

}

HTML中的错误检查：

  <div>Password: <input ng-model="someInput.password1" type='password' ng-change="passwordValidation()"></div>
  <div>Password repeat: <input ng-model="someInput.password2" type='password'  ng-change="passwordValidation()"></div>
  <div class="messageBlock" 
       ng-class="{'error': someInput.password1.length < 1 || someInput.password1 !== someInput.password2 || errorMessage }"> <!-- if passwords dont match, or password not long enough, apply error class -->
      <div ng-show="!!errorMessage"> {{errorMessage}} </div> <!-- show some other error message from JS, use ng-show to hide div (changes css display to none) -->
      <div ng-bind="successMessage"> </div>  <!-- similar to {{ }}, but using ng-bind is better than {{ }} templates, due to handling page errors better-->
      <div ng-if="someInput.password1.length < 1"> Password not long enough. </div> <!-- ng-if adds/removes from the DOM based on truthy value in condition --> 
      <div ng-if="someInput.password1 !== someInput.password2"> Password 2 doesn't match first one. </div>
  </div>

注意，我留下了errorMessage和successMessage，但它们尚未在任何地方定义，我们现在将在passwordValidation中定义它们。此外，还有一个ng-change函数与常规HTML中的onchange大致相同

// changing to a scope function, so it works with ng-change
$scope.passwordValidation = function(){

    var uname = $scope.someInput.password1; // use scope variables to grab passwords
    var pword = $scope.someInput.password2;

    var re = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\.,\[\]_£|\`¬':\;\~{}<>()#?!\@$\%^&*-]).{8,20}$/;

    if(re.test(uname))
        $scope.successMessage = "Success!"
    else 
        $scope.errorMessage = "Password contains incorrect characters!"
}

最后，这是一个工作的掠夺者：http://plnkr.co/edit/98AnSbO2fpdsFuo3hVCz?p=preview

从JavaScript转换为Angular JS

1 个答案: