此处为必填移动字段的时间 清空,然后输入与要求匹配的密码,然后仍然通过手机验证并接受表格。如何解决此问题,只验证密码字段,而不验证整个表单。我提到了帖子数量,但无法解决。怎么可以在这里完成。
JS指令:-
;(function () {
'use strict';
angular
.module('Components')
.directive('passwordRules', passwordRules);
function passwordRules () {
var directive = {
restrict: 'E',
replace: true,
scope: {
password: '=',
formName: '='
},
templateUrl: 'app/components/password_rules/password_rules.template.html',
controller: PasswordRulesCtrl,
controllerAs: 'vm',
bindToController: true
};
return directive;
}
/* @ngInject */
function PasswordRulesCtrl ($scope) {
var vm = this;
var formName = vm.formName;
var initializePassword = function () {
vm.passwordRequirement = {
hasCharacterLimit: false,
hasUppercaseCharacter: false,
hasDigit: false,
hasSpecialCharacter: false
};
if (formName.$error.required) {
formName.$invalid = true;
} else {
formName.$invalid = false;
}
};
var checkForPasswordRequirements = function () {
if (vm.password) {
vm.passwordRequirement.hasCharacterLimit = ((vm.password.length >= 8) && (vm.password.length <= 32));
vm.passwordRequirement.hasUppercaseCharacter = (/[A-Z]/.test(vm.password));
vm.passwordRequirement.hasDigit = (/[0-9]/.test(vm.password));
vm.passwordRequirement.hasSpecialCharacter = /[!@#$%^&*()+\-:;<=>{}|~?]/.test(vm.password);
var isPasswordRequirementsMet = vm.passwordRequirement.hasCharacterLimit && vm.passwordRequirement.hasUppercaseCharacter && vm.passwordRequirement.hasDigit && vm.passwordRequirement.hasSpecialCharacter;
formName.$invalid = !isPasswordRequirementsMet;
} else {
initializePassword();
}
};
var init = function () {
initializePassword();
};
init();
$scope.$watch('vm.password', function (currentValue, previousValue) {
if (!angular.equals(currentValue, previousValue)) {
checkForPasswordRequirements();
}
});
}
})();
和HTML代码:-
<form name="vm.personalForm" novlidate autocomplete="off">
<md-input-container>
<label>Name</label>
<input type="text" ng-model="vm.eou.us.full_name" required>
</md-input-container>
<md-input-container ng-if="vm.eou.us.email">
<label>Email</label>
<input type="email" ng-model="vm.eou.us.email" disabled required>
</md-input-container>
<md-input-container>
<label>Mobile</label>
<input type="mobile" ng-model="vm.eou.ou.mobile" autocomplete="off" required>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" ng-attr-type="{{ vm.showPlainPassword ? 'text' : 'password' }}" name="password_valid" ng-model="vm.eou.us.password" autocomplete="off" ng-focus="vm.isPasswordFieldFocused = true" ng-blur="vm.isPasswordFieldFocused = false" ng-change="vm.checkForPasswordRequirements()">
<span class="action-wrapper" ng-click="vm.showPlainPassword = !vm.showPlainPassword">
<span class="action-text" ng-if="!vm.showPlainPassword">Show</span>
<span class="action-text" ng-if="vm.showPlainPassword">Hide</span>
</span>
</md-input-container>
<div ng-if="vm.eou.us.password || vm.isPasswordFieldFocused">
<password-rules password="vm.eou.us.password" form-name="vm.personalForm.password_valid"></password-rules>
</div>
<div layout="row" layout-align-gt-xs="end center" class="settings-action-group">
<button type="submit" class="btn btn-success" ng-click="vm.save(vm.personalForm)" ng-disabled="vm.personalForm.$invalid">Save</button>
</div>
</form>