单击提交时无法检查空或空

Posted 2023-03-07

【中文标题】单击提交时无法检查空或空

【英文标题】：I can't check the empty or null when I click submit

【发布时间】：2019-11-09 01:00:17

【问题描述】：

---

点击提交时无法检查空或null。

当按下空格键时，空值将被发送到数据库。

按钮可以提交传递数据到数据库

请帮忙。

  <form #Register="ngForm">
  <div style="width: 500px">

    <br/>
    <h4>New Reegister</h4>
    <br/>

    <div class="form-group">
      <dt><label for="name">Name</label></dt>
      <input [(ngModel)]="name" name="name" type="text" class="form-control" placeholder="input your name" data-bv-notempty-message="The name is required" required>
    </div>

    <div class="form-group">
      <dt><label for="lastname">LastName</label></dt>
      <input [(ngModel)]="lastname" name="lastname" type="text" class="form-control" placeholder="input your lastname" data-bv-notempty-message="The lastname is required" required>

    </div>

    <div class="form-group">
      <dt><label for="email2">E-mail</label></dt>
      <input [(ngModel)]="email2" name="email2" type="text" class="form-control" placeholder="input your email" data-bv-notempty-message="email" required [pattern]="emailRegex" >
      <div class= "p-2 text-danger"> <small>* Require Example : [e-mail]</small> </div>
    </div>

    <div class="form-group">
      <dt><label for="password2">Password</label></dt>
      <input [(ngModel)]="password2" name="password2" type="password" class="form-control" placeholder="input your password" minlength="4" required>
      <div class= "p-2 text-danger"> <small>* Enter atleast 4 characters</small> </div>
    </div>
  <!--
    <div class="form-group">
        <label for="password3">Password Confirm</label>
        <input [(ngModel)]="password3" name="password3" type="password" class="form-control" placeholder="input your password" required>
    </div>
    -->

    <div class="form-group">
        <dt><label for="passwordhint">Password Hint</label></dt>
        <input [(ngModel)]="passwordhint" name="passwordhint" type="password" class="form-control" placeholder="input your password" minlength="4" required>
        <div class= "p-2 text-danger"> <small>* Enter atleast 4 characters</small> </div>
      </div>

    <button type="submit" type="reset" class="btn btn-danger" [disabled]="!Register.valid" (click)="Regis()">Save</button>
    

  </div>
  </form>

---

无法检查数据是否为空

当按下空格键时，空值将被发送到数据库。

按钮可以提交传递数据到数据库

请帮忙。

【参考方案1】：

数据 " " 是有效数据，但它是空的，而不是 null。您可以在将其保存到数据库之前通过trim 函数进行检查。

例如：

let str = ' ';
console.log(str.length) // Length = 1
str = str.trim();
// Here str = '' and you can check length of it
console.log(str.length) // Length = 0

更多详情：trim

【讨论】：

谢谢，如果我想检查“”不要按提交，请麻烦您推荐

您可以在 js 中为您的输入（电子邮件...）的onChange 事件添加句柄函数，并在用户每次更改时修剪用户输入的值。如果输入值为null或空，您将禁用提交按钮，用户只有在所有输入值都有效时才能点击提交（此时您启用提交按钮）

【参考方案2】：

这必须进入提交按钮。

在这种情况下，如果变量 'name' 仅包含空格，则函数 'trim' 会将其长度减少到 0。

所以数据库调用只有在变量 'name' 有值时才会发生。

this.name = this.name.trim();
if(name.length) 
    // do the database call
 else 
    // prompt a message to let the user know that the particular field is empty