构造仅接受数字的 vaadin 14 文本字段

Question

我需要制作只能接受数字的 vaadin 14 文本字段。文本字段的标准如下

1.文本字段只能接受数字，因为我想将该文本字段用作手机号码字段。 2. 以这样一种方式验证，即如果用户尝试输入字母，则文本字段中不得反映任何内容。必须只允许在文本字段中输入数字。 3.任何警告或错误都不能显示在UI中，因为我们专门为手机号码制作了文本字段。

我尝试过的事情是活页夹，但它允许稍后在他们验证的焦点丢失事件之后输入字母并提供我不想要这种行为的错误消息。

也尝试过 vaadin 数字字段，但允许字符 'e'

简单明了，我正在寻找只输入数字的文本字段。如果用户尝试输入字母，则文本字段中必须没有任何内容。

Answer 1

服务器端

你可以做很多选择，第一个是answer by Alim Özdemir中已经提到的服务器端验证器：

binder.forField(textFieldForNumber)
      .withValidator(new RegexpValidator("Only 1-9 allowed","\\d*"))
      .bind(YourEntity::getNo, YourEntity::setNo);

客户端

也有可能使用textField.setPattern(..)方法在客户端做同样的检查和输入过滤，例如：

textFieldForNumber.setPattern("\\d*");

此外，可以通过

来防止输入与模式完全不匹配

textFieldForNumber.setPreventInvalidInput(true);

备用小部件：NumberField

第三种选择是使用NumberField 组件。

Answer 2

您可以使用活页夹对字段进行验证，例如

binder.forField(textFieldForNumber)
      .withValidator(new RegexpValidator("Only 1-9 allowed","\\d*"))
      .bind(YourEntity::getNo, YourEntity::setNo);

Answer 3

我找到了我的答案的解决方案我在 Vaadin 新测试版中提取了整数文本字段的源代码

代码如下

@Tag("vaadin-integer-field")
@HtmlImport("frontend://bower_components/vaadin-text-field/src/vaadin-integer-field.html")
@JsModule("@vaadin/vaadin-text-field/src/vaadin-integer-field.js")
public class BigIntegerField extends AbstractNumberField<BigIntegerField, BigInteger> {

    private static final SerializableFunction<String, BigInteger> PARSER = valueFormClient -> {
        if (valueFormClient == null || valueFormClient.isEmpty()) {
            return null;
        }
        try {
            return new BigInteger(valueFormClient);
        } catch (NumberFormatException e) {
            return null;
        }
    };

    private static final SerializableFunction<BigInteger, String> FORMATTER = valueFromModel -> valueFromModel == null
            ? ""
            : valueFromModel.toString();

    /**
     * Constructs an empty {@code IntegerField}.
     */
    public BigIntegerField() {

          super(PARSER, FORMATTER, Double.MIN_VALUE, Double.MAX_VALUE);
  //      super(PARSER, FORMATTER, new BigInteger(String.valueOf(Integer.MIN_VALUE)), new BigInteger(String.valueOf(Integer.MAX_VALUE)));
    }

    /**
     * Constructs an empty {@code IntegerField} with the given label.
     *
     * @param label
     *            the text to set as the label
     */
    public BigIntegerField(String label) {
        this();
        setLabel(label);
    }

    /**
     * Constructs an empty {@code IntegerField} with the given label and
     * placeholder text.
     *
     * @param label
     *            the text to set as the label
     * @param placeholder
     *            the placeholder text to set
     */
    public BigIntegerField(String label, String placeholder) {
        this(label);
        setPlaceholder(placeholder);
    }

    /**
     * Constructs an empty {@code IntegerField} with a value change listener.
     *
     * @param listener
     *            the value change listener
     *
     * @see #addValueChangeListener(ValueChangeListener)
     */
    public BigIntegerField(
            ValueChangeListener<? super ComponentValueChangeEvent<BigIntegerField, BigInteger>> listener) {
        this();
        addValueChangeListener(listener);
    }

    /**
     * Constructs an empty {@code IntegerField} with a value change listener and
     * a label.
     *
     * @param label
     *            the text to set as the label
     * @param listener
     *            the value change listener
     *
     * @see #setLabel(String)
     * @see #addValueChangeListener(ValueChangeListener)
     */
    public BigIntegerField(String label,
            ValueChangeListener<? super ComponentValueChangeEvent<BigIntegerField, BigInteger>> listener) {
        this(label);
        addValueChangeListener(listener);
    }

    /**
     * Constructs a {@code IntegerField} with a value change listener, a label
     * and an initial value.
     *
     * @param label
     *            the text to set as the label
     * @param initialValue
     *            the initial value
     * @param listener
     *            the value change listener
     *
     * @see #setLabel(String)
     * @see #setValue(Object)
     * @see #addValueChangeListener(ValueChangeListener)
     */
    public BigIntegerField(String label, BigInteger initialValue,
            ValueChangeListener<? super ComponentValueChangeEvent<BigIntegerField, BigInteger>> listener) {
        this(label);
        setValue(initialValue);
        addValueChangeListener(listener);
    }

    /**
     * Sets the minimum value of the field. Entering a value which is smaller
     * than {@code min} invalidates the field.
     * 
     * @param min
     *            the min value to set
     */
    public void setMin(int min) {
        super.setMin(min);
    }

    /**
     * Gets the minimum allowed value of the field.
     *
     * @return the min property of the field
     * @see #setMin(int)
     */
    public int getMin() {
        return (int) getMinDouble();
    }

    /**
     * Sets the maximum value of the field. Entering a value which is greater
     * than {@code max} invalidates the field.
     *
     * @param max
     *            the max value to set
     */
    public void setMax(int max) {
        super.setMax(max);
    }

    /**
     * Gets the maximum allowed value of the field.
     *
     * @return the max property of the field
     * @see #setMax(int)
     */
    public int getMax() {
        return (int) getMaxDouble();
    }

    /**
     * Sets the allowed number intervals of the field. This specifies how much
     * the value will be increased/decreased when clicking on the
     * {@link #setHasControls(boolean) control buttons}. It is also used to
     * invalidate the field, if the value doesn't align with the specified step
     * and {@link #setMin(int) min} (if specified by user).
     * 
     * @param step
     *            the new step to set
     * @throws IllegalArgumentException
     *             if the argument is less or equal to zero.
     */
    public void setStep(int step) {
        if (step <= 0) {
            throw new IllegalArgumentException("The step cannot be less or equal to zero.");
        }
        super.setStep(step);
    }

    /**
     * Gets the allowed number intervals of the field.
     *
     * @return the step property of the field
     * @see #setStep(int)
     */
    public int getStep() {
        return (int) getStepDouble();
    }

}

这实际上解决了我关于手机号码输入的问题。