web-dev-qa-db-ja.com

h:inputText値には数字のみを受け入れます

JSFでh:inputTextの値を確認する方法はありますか。これは数字のみを受け入れる必要があります。 Integerまたはfloatであることを意味します。

12s3a562.675a5678s1268712haf.563345などの値を入力すると、エラーが表示されます。それ以外の場合は、受け入れて続行します。

12
abhi

入力値をDoubleの代わりにBigDecimalまたはそれ以上のStringプロパティにバインドするだけです。

private BigDecimal number; // Double can also, but beware floating-point-gui.de
<h:inputText value="#{bean.number}" />

JSFには、自動的に起動するタイプに対して ビルトインコンバーター があります。以下のようにコンバータメッセージをカスタマイズできます。

<h:inputText value="#{bean.number}" converterMessage="Please enter digits only." />
19
BalusC

整数のみを受け入れたい場合、<h:inputText onkeypress="if(event.which &lt; 48 || event.which &gt; 57) return false;"/>は簡単な方法です。

type="number"に比べて、数字以外を入力することさえできないという利点があります。

17
dasLort

これをxhtmlに追加する場合

xmlns:pe = "http://primefaces.org/ui/extensions"

pe:inputNumberと呼ばれるPrimefaces Extensionsの番号にinputextを使用します。これは、番号だけでなく小数も検証するので、より完全な場合があります。

<pe:inputNumber value="#{beanTest.myValue}" thousandSeparator="" decimalSeparator="." decimalPlaces="0" />
10

試してみる

<h:inputText value="SomeValue" converter="javax.faces.Double" />
5
Vasil Lukach

これは私のために働いています

onkeypress="if( (event.which &lt; 48 || event.which &gt; 57) ) return false;"
3
Daniel Azamar

以下にいくつかの異なるオプションを示します。

  • bean validation から@Digitsを使用できます。
  • f:convertNumber を使用できます。
  • バッキングBeanメソッドで入力を検証できます(このためのチュートリアルは簡単に見つかります)。
  • Jsf 2.2およびhtml5がオプションの場合、<input type="number" />を使用できます
  • または、独自のJavascript検証を使用できます。

最良のオプションは、Bean検証f:convertNumberまたはHTML5を使用します。これらは最もクリーンで、冗長性が最も少ないコードです。

3
Simon

JS検証を使用できます

最初に、入力を検証するJS関数を定義する必要があります

function validateInput(regexString) {
    var theEvent = window.event || event;
    var key = theEvent.keyCode || theEvent.which;
    if (key >= 46) {
        key = String.fromCharCode(key);
        var regex = new RegExp("^" + regexString + "$");
        if (!regex.test(key)) {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) {
                theEvent.preventDefault();
            }
        }
    }
}

次に、h:inputでonKeyPressイベントをキャプチャし、関数を呼び出します

<h:inputText value="..." onKeyPress="validateInput('[0-9]*')/>

そして、それはあなたが数字を入力できるようにするだけです。

他の正規表現を検証する必要がある場合、この使用を他のケースに簡単に拡張できます。

他のユーザーイベントをキャプチャする場合は、適切なタグを使用してください。

乾杯

1
Arturo Volpe

Primefacesを使用する場合は、<p:keyFilter>から<h:inputText>または<p:inputText>

例:

<h:inputText id="text1" value="#{bean.intValue}" />
<p:keyFilter for="text1" mask="pint" />

<p:inputText id="text2" value="#{bean.numberValue}" >
  <p:keyFilter mask="num" />
</p:inputText>

これにより、キーボード入力がブロックされ、only有効な整数(int/pint)または10進数(num/pnum)入力が可能になります。 。 pnumおよびpintタイプでは、正の入力のみが許可されます(符号なし)。

1
YoYo

PrimeFaces Extensionの代わりに今すぐ使用できます!

https://www.primefaces.org/showcase/ui/input/inputNumber.xhtml

0
Mehrdad