如何做到 "inline solution" <input type="text"> 只允许数字，否则它也会发出警报？

Question

如何内联解决方案 使用与下面相同的解决方案，但添加了警告消息。现在它不允许文本，只允许数字，但没有警报。如果没有像现在这样修改太多功能而没有插入数字，我需要添加一条警告消息。如何向其中添加该警报？

记住由于我页面上的技术问题，我搜索了一个简短的简单内联解决方案，而不是一些查询或单独的JavaScript 除非别无他法然后单独 JavaScript.

HTML 内联 JavaScript:

<input type="text" name="areinp" size="30" value="" onChange="areCon()" onkeyup="this.value=this.value.replace(/[^\d]/,'');">

更新： 我将其更改为 type="number" 但警报消息的问题仍然存在。我需要一条提醒消息，以防有人输入字母而不是数字。

<input type="number" name="areinp" size="30" value="" onChange="areCon()">

Answer 1

看看HTML pattern Attribute:

<form onsubmit="return false;">
    Number <input type="text" pattern="[\d]+" title="Please enter a number">
    <input type="submit" />
</form>

Answer 2

<input> 标签指定一个输入字段，用户可以在其中输入数据。 <input type="text"> 定义单行文本输入字段：

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

参考：W3schools.

在你的例子中，你使用了 <input type="text">。

对于这种情况，您可以使用类型数字，用户只能在里面输入数字。

<input type="number">

要向用户显示一个警报，请尝试使用一种功能：

HTML:

<form name="myForm" action="" onsubmit="return checkInp()" method="post">
    Number: <input type="text" name="number">
<input type="submit" value="Submit">

Javascript:

function checkInp()
{
    var x = document.forms["myForm"]["number"].value;
    var regex = /^[0-9]+$/;
    if (!x.match(regex))
    {
        alert("Must input numbers");
        return false;
    }
}

在你的标签中添加 html: onsubmit="return checkInp()" 或者您可以使用@Andrii 的回答，<input type="submit"> 并且只会发送数字。

Obs.：我不确定这样做是否是最佳实践...但是，这就是您想要的并且使用我的版本，您将能够让用户键入任何字符，但是如果用户发送文本，它将显示一条警告消息“必须输入数字

Answer 3

一件事是声明特定类型的输入。然后只接受写入此类型的值。例如当你声明：

<input type="number"/>

但验证意味着其他。验证是指验证功能。而JS给了我们实现它们的工具。

验证函数不会处理您输入的类型。它采用 DOM 元素的值，例如文本框。对于您指定的情况，它决定它是否有效。然后在有效或无效的情况下根据您的需要对值和 DOM 元素进行操作。

您可以轻松地在 HTML 中添加脚本代码并集成验证。

这个例子展示了如何使用 JS 实现验证的正确方法。您会发现一些用于验证电子邮件、姓名或值是数字（您要求的）的功能。

对于用户填写表单时的动态验证，它会调用特定的验证函数 'onblur' 什么意思 'on focus lost'。您会在表达式中找到它：

onblur="validateFunction(value)"

当用户提交时，他正在调用表单验证函数。这是由各个验证功能支持的。对所有值进行最后检查。例如，如果你想要一些必填字段，你可以在这里实现。比每个单独的验证避免无效值更好。这样我们就得到了对函数的正确封装。我们在定义时得到这个：

<form action="" onsubmit="return validateForm()">

然后：

<fieldset>
  <input type="submit" id="submit" name="submit" value="Submit" />
</fieldset>

给个看，有什么需要随时问。

  <script>
    function validateName(x){
      // Validation rule
      var re = /[A-Za-z -']$/;
      // Check input
      if(re.test(document.getElementById(x).value)){
        // Style green
        document.getElementById(x).style.background ='#ccffcc';
        // Hide error prompt
        document.getElementById(x + 'Error').style.display = "none";
        return true;
      }else{
        // Style red
        document.getElementById(x).style.background ='#e35152';
        // Show error prompt
        document.getElementById(x + 'Error').style.display = "block";
        return false; 
      }
    }
    // Validate email
    function validateEmail(email){ 
      var re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(re.test(email)){
        document.getElementById('email').style.background ='#ccffcc';
        document.getElementById('emailError').style.display = "none";
        return true;
      }else{
        document.getElementById('email').style.background ='#e35152';
        return false;
      }
    }
    //Validate number
    function validateNumber(num) {
    if (!isNaN(parseFloat(num)) && isFinite(num)) {
      //is number
        document.getElementById('numberError').style.display = "none";
        document.getElementById('number').style.background ='#ccffcc';
    } else {
      //no number
       document.getElementById('number').style.background ='#e35152';
    }
    }
 
    function validateForm(){
      // Set error catcher
      var error = 0;
      // Check name
      if(!validateName('name')){
        document.getElementById('nameError').style.display = "block";
        error++;
      }
      // Validate email
      if(!validateEmail(document.getElementById('email').value)){
        document.getElementById('emailError').style.display = "block";
        error++;
      }
      //Validate number
      if(!validateNumber(document.getElementById('number').value)){
        document.getElementById('numberError').style.display = "block";
        error++;
      }
      
      // Don't submit form if there are errors
      if(error > 0){
        return false;
      }
    }     
  </script>
 
 <form action="" onsubmit="return validateForm()">
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" onblur="validateName(name)" />
      <span id="nameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span>
    </fieldset>
    <fieldset>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" onblur="validateEmail(value)" />
      <span id="emailError" style="display: none;">You must enter a valid email address</span>
    </fieldset> 
    <fieldset>
      <label for="number">Number</label>
      <input type="text" name="number" id="number" onblur="validateNumber(value)" />
      <span id="numberError" style="display: none;">You must enter a number</span>
    </fieldset> 
      
    <fieldset>
      <input type="submit" id="submit" name="submit" value="Submit" />
    </fieldset>   
  </form>

如何做到 "inline solution" <input type="text"> 只允许数字，否则它也会发出警报？

How to do "inline solution" <input type="text"> to only allow number and if else it will also give an alert too?

html

javascript

alert

inline

input