Question

我有一个简单的html页面，其中包含两个输入文本框和一个提交按钮。当我点击包含无效电子邮件地址的提交按钮时，它会给我一条错误消息。我如何为数值的其他文本框实现相同的（显示弹出的小工具提示）？

这是完整的HTML

<html>
<head>
<style>
body {
  font: 1em sans-serif;
  padding: 0;
  margin : 0;
}

form {
  max-width: 200px;
  margin: 0;
  padding: 0 5px;
}

p > label {
  display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
/* required to properly style form 
   elements on WebKit based browsers */
  -webkit-appearance: none;

  width : 100%;
  border: 1px solid #333;
  margin: 0;

  font-family: inherit;
  font-size: 90%;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input:invalid {
  box-shadow: 0 0 5px 1px red;
}

input:focus:invalid {
  outline: none;
}
</style>

</head>
<body><form>
<p>
    <label for="t1">What's your age?</label>
    <input type="number" id="t1" name="age">
  </p>
<p>
    <label for="t2">What's your e-mail?</label>
    <input type="email" id="t2" name="email">
  </p>
<p>
    <button>Submit</button>
  </p>
</form>
</body>
</html>

Answer 1

更好的解决方案是使用pattern属性，该属性使用正则表达式来匹配输入：

  public static void main(String args[]){
      System.out.println("Guess the number of Apples Tom has");
      Scanner sc= new Scanner(System.in);
      int number=sc.nextInt();
      System.out.println("Tom, is it higher or lower?");
      String higherOrLower=sc.nextLine();

      while(true){
          number= getValue(higherOrLower,number);
          System.out.println("Tom, is it higher or lower?");
          higherOrLower=sc.nextLine();
          if(higherOrLower.equalsIgnoreCase("none")) {
                break;
          }
      }
  }

  public static int getValue(String i,int j){

        if(i.equalsIgnoreCase("lower")) {
            j--;
            return j;
        } else if(i.equalsIgnoreCase("higher")) {
            j++;
            return j;
        } else {
            return j;
        }
    }

\ d是数字的正则表达式，*表示它接受多个数字。

Answer 2

<input type="number" required >
<input type="submit" >

这对我有用

Answer 3

由于您已经在使用HTML 5数字文本框，因此您无需手动设置此类工具提示。如果有任何验证错误，则此工具提示将自动显示为与电子邮件相同。

这是一个数字文本框，因此除了数字之外，它不允许您输入任何其他字符，因此在这种情况下，您将不会收到任何验证错误。如果您设置了最小值和最大值等限制，并且验证不正确，则会自动显示工具提示。

您可以通过在文本框中设置一些数字限制来检查工具提示。希望这会帮助你。

Answer 4

可以通过javascript帮助实现。

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

我只是跳过非数字字符。用户只能填充数字数据。希望这是你想要的。

Answer 5

使用HTML进行默认验证可以毫不费力地完成

<input type="number" required >
<input type="submit" >

HTML5验证数值

5 个答案: