目前我有以下代码

<input type="number" />

结果是这样的

右边的选择器允许数字变为负数。我该如何预防呢?

我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?


当前回答

Try

<input type="number" pattern="^[0-9]" title= " Only number" min="1" step="1">

其他回答

我在angular中创建了一个指令,强制输入no“-”。

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appPositiveNumber]'
})
export class PositiveNumberDirective {
  private regex = new RegExp(/^\d*[.,]?\d*$/g);
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
    if (!event.key.match(this.regex) && !this.specialKeys.includes(event.key)) {
      event.preventDefault();
      return;
    }
  }
}

所以u可以像这样将它添加到元素上:

<input type="number" appPositiveNumber min="0" step="1" max="9999"
      [(ngModel)]="value.employeeCount">

我已经找到了防止负数的另一种解决方案。

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

试试这个:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}

这取决于你想要的是int还是float字段。下面是这两款游戏的外观:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

int字段附加了正确的验证,因为它的最小值是1。然而,float字段接受0;为了解决这个问题,你可以添加一个约束验证器:

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle这里。

注意,这些解决方案都不能完全阻止用户尝试输入无效的输入,但是您可以调用checkValidity或reportValidity来确定用户是否输入了有效的输入。

当然,您仍然应该进行服务器端验证,因为用户总是可以忽略客户端验证。

你可以使用以下命令使type="number"只接受正数:

<input type="number" step="1" pattern="\d+">