English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Implementação de diretiva de validação de senha de formulário angularjs

Código HTML

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="Por favor, insira a senha">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="Por favor, insira novamente a senha">
    <span ng-show="form.passwordConfirm.$error.equalTo">As duas senhas não coincidem</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//Imprimir o escopo atual
      console.log(attrs);//imprimir lista de atributos do rótulo atual
      console.log(controlador);//imprimir controle atual
      var controlador = atributos["equalTo"];//obter valor chave do atributo instrução personalizada
      se (controlador) {//julgar se a chave existe
        esquema.$watch(controlador, function () {//existir escuta de início
          controlador.$validate()//chamar manualmente a validação a cada mudança
        ) 
        // obter controlador pai FormController do controlador atual
        var controlador = controlador.$$parentForm[controlador];//obter controlador do modelo especificado
        console.log(controlador)
        controlador.$validators.equalTo = function (valorModelo, valorVisível) {//conteúdo do validador personalizado
          var valorAlvo = controlador.$viewValue;//obter valor de entrada de password
          return valorAlvo == valorVisível;//se for igual ao valor de passwordConfirm
        }
        ctrl.$formatters.push(function (valor) {
          console.log("正在进行数据格式化的值:", valor)
          valor de retorno;
        )
        ctrl.$parsers.push(function (valor) {
          console.log("正在进行数据转换的值:", valor)
          valor de retorno;
        )
      }
    }
  }
)

Endereço de Demonstração:https://tianyouh.github.io/angularPasswordConfirm/

Você também pode gostar