JSFでh:inputText
の値を確認する方法はありますか。これは数字のみを受け入れる必要があります。 Integer
またはfloat
であることを意味します。
12s3a562.675
、a5678s12
、68712haf.563345
などの値を入力すると、エラーが表示されます。それ以外の場合は、受け入れて続行します。
入力値を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." />
整数のみを受け入れたい場合、<h:inputText onkeypress="if(event.which < 48 || event.which > 57) return false;"/>
は簡単な方法です。
type="number"
に比べて、数字以外を入力することさえできないという利点があります。
これをxhtmlに追加する場合
xmlns:pe = "http://primefaces.org/ui/extensions"
pe:inputNumberと呼ばれるPrimefaces Extensionsの番号にinputextを使用します。これは、番号だけでなく小数も検証するので、より完全な場合があります。
<pe:inputNumber value="#{beanTest.myValue}" thousandSeparator="" decimalSeparator="." decimalPlaces="0" />
試してみる
<h:inputText value="SomeValue" converter="javax.faces.Double" />
これは私のために働いています
onkeypress="if( (event.which < 48 || event.which > 57) ) return false;"
以下にいくつかの異なるオプションを示します。
@Digits
を使用できます。<input type="number" />
を使用できます最良のオプションは、Bean検証、f:convertNumberまたはHTML5を使用します。これらは最もクリーンで、冗長性が最も少ないコードです。
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]*')/>
そして、それはあなたが数字を入力できるようにするだけです。
他の正規表現を検証する必要がある場合、この使用を他のケースに簡単に拡張できます。
他のユーザーイベントをキャプチャする場合は、適切なタグを使用してください。
乾杯
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
タイプでは、正の入力のみが許可されます(符号なし)。
PrimeFaces Extensionの代わりに今すぐ使用できます!
https://www.primefaces.org/showcase/ui/input/inputNumber.xhtml