繁体   English   中英

如何防止用户在 angular 的密码字段中输入空格?

how can I prevent user from entering space in a password field in angular?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想防止在密码字段中输入任何空格。 我认为我的代码是正确的,但也许有些东西已经更新,但我不知道我该怎么做。
这是我的代码。首先我把 login.component.html 然后 login.component.ts 然后验证器文件。

<form [formGroup]="from">
     <div class="form-group">
          <label for="exampleInputPassword1" class="form-label">Password</label>
          <input type="text"
          formControlName="password"
          class="form-control"
          id="exampleInputPassword1">
          <div *ngIf="from.controls['password'].invalid && (from.controls['password'].dirty || from.controls['password'].touched)" class="alert alert-danger">
          <div *ngIf="password.errors.noSpaceAllowed">No space permitted</div>
          </div>
        
        </div>
    </form>
        




import { Component } from '@angular/core';
    import { FormControl, FormGroup, Validators } from '@angular/forms';
    import { TextValidator } from '../validator.validation';
    
    @Component({
      selector: 'login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent{
      from = new FormGroup({
        email : new FormControl('',[Validators.required]),
        password : new FormControl('',[TextValidator.noSpaceAllowed]),
      });
    
      
      get email(){
        return this.from.get('email');
      }
      get password(){
        return this.from.get('password');
      }
    }
        
        

   



 import { AbstractControl, ValidationErrors } from "@angular/forms";
    export class TextValidator{
        static noSpaceAllowed(control:AbstractControl) : ValidationErrors | null{
            // != -1 means in contains space
            if((control.value as string).indexOf('') != -1){
                //fire validator
                return {noSpaceAllowed : true};
            }
            else{
                return null;
            }
        }
    }
2 个回复

您可以使用模式验证器: https://angular.io/api/forms/Validators

你好.component.ts

import { Component, Input } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "hello",
  template: `
    <form [formGroup]="form">
      <div class="form-group">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input
          type="text"
          formControlName="password"
          class="form-control"
          id="exampleInputPassword1"
        />
        <div
          *ngIf="
            form.controls['password'].invalid &&
            (form.controls['password'].dirty ||
              form.controls['password'].touched)
          "
          class="alert alert-danger"
        >
          <div *ngIf="password?.errors?.pattern">No space permitted</div>
        </div>
      </div>
    </form>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  form = new FormGroup({
    email: new FormControl("", [Validators.required]),
    password: new FormControl("", 
     [Validators.pattern(/^\S*$/)] // <-- pattern with the regular expression which detects spaces
    ) 
  });

  get email() {
    return this.form.get("email");
  }
  get password() {
    return this.form.get("password");
  }
}

这里是stackblitz上的代码: https://stackblitz.com/edit/angular-ivy-gylfmt?file=src/app/hello.component.ts

只需将onkeypress="return event.charCode != 32"添加到您的输入字段中,例如

<input onkeypress="return event.charCode != 32">

32 是空格的 ASCII 码。 因此,您允许除空格以外的所有字符。

6 HTMLUnit可以在密码字段中输入数据吗?

我的HTMLUnit测试失败了,我感觉这是因为我使用setValueAttribute()方法输入密码,并且由于某种原因不起作用。 有任何想法吗? 我应该以密码的加密形式传递HTMLUnit吗? 编辑: 设置传递的代码: loginForm.getInputByName( ...

8 如何防止用户在控制台中获取密码字段值

我一直在帮助一些人使用他们的电脑并修理它们。 其中一个人问我在自动表单字段中存储密码的安全性。 我向他们展示了如何从控制台中的简单 jQuery 调用中检索密码的快速技巧。 在一些网站上工作时,我一直在试图找出一种方法来阻止使用这个技巧来找出保存的密码是什么。 如果您不知道,要了解我在说什么,请尝 ...

9 如何防止Django中的用户注册表单返回密码字段不能为null

我已经在Django中创建了一个用户注册表单,但是每次测试时,都不会将用户保存到数据库中,因为输入密码时会引发“此字段不能为空。我不明白为什么会这样,因为该表格以前是有效的,并且遵循与其他注册表格相同的程序。我一直试图找出问题的根源,但我仍然不了解该字段如何可以为空并且仍然无法正常工作。终端,我 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM