在没有 <FORM> 和其他服务器端代码的情况下验证 HTML5 字段输入

Validate HTML5 field input without <FORM> and other server-side code

本文关键字：情况下 代码 验证 HTML5 输入 字段 服务器端 FORM 其他      更新时间：2023-09-26

一直在摆弄jQuery和HTML5，但我被困在一个简单的简单操作上。JSFiddle here： http://tinyurl.com/oqmkyhr

我

有一个字段输入，我在其中输入一个数字，当我按下按钮时，输入的数字四舍五入到小数点后 2 位。问题是，您不能使用或服务器端代码，并且它都在 1 个 html 文档中。

这是我所拥有的：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scotiabank Currency Converter</title>
  <meta name="description" content="Converts currencies with Yahoo! Finance API">
  <meta name="author" content="Kangze Huang">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
        $('Amount').value = parseFloat(value).toFixed(2);
        $('h2').text(value);
    });
});
</script>
</body>

当我按下验证按钮时，它会变成 NaN(在 Chrome 和其他网络浏览器上(！在JSFiddle上，它什么都不做。我做错了什么？也许语法或我缺少的东西？

这是因为你有$('Amount').value。您缺少"#"和括号，并且引用了错误的值。但你有正确的想法。您可以尝试的是：

$('#validate').click(function(){
    var amount = $('#Amount').value();
        $('h1').text(parseFloat(value).toFixed(2));
    });
});

您的选择器应该是 $("#Amount"(。您缺少 #。

此外，如果您尝试分配值，则应使用：

$("#Amount").val( parseFloat(value).toFixed(2) );

我不确定您从哪里获得"值"变量，我没有看到它在任何地方被分配。

我在您的代码中看到许多语法和其他错误，请使用以下代码：

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scotiabank Currency Converter</title>
  <meta name="description" content="Converts currencies with Yahoo! Finance API">
  <meta name="author" content="Kangze Huang">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
        $('#Amount').val(parseFloat(value).toFixed(2)); //you missed # in this, normally in jquery we use .val() method to set the value of the input types
        $('h1').html(parseFloat(value).toFixed(2)); // in the above code you have used h1 so here also use h1
    });
});
</script>
</body>

$('#validate').click(function(){
   1^
    $('Amount').value = parseFloat(value).toFixed(2);
      2^       3^                 4^
    $('h2').text(value);
      5^
  1. validate不是Validate
  2. Amount将匹配不存在<Amount>元素。ID 选择器以#开头
  3. jQuery 对象没有值属性。DOM 节点(如果它们是表单控件(可以。您可能正在寻找val()
  4. value是一个未定义的变量。您需要在使用它之前定义它。您可能想要$('Amount').val()而不是使用value。
  5. 您没有与此选择器匹配的元素，标题元素应用于标题。

所以你可能正在寻找的是：

$('#Validate').click(function() {
  var value = $('#Amount').val();
  value = parseFloat(value).toFixed(2);
  console.log(value);
  $('output').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<output></output>

如果你想

在jquery中通过id选择一些东西，你需要使用#符号。在您的情况下$('#Amount') ;此外，您的页面上没有h2元素，因此$('h2').text(value);不会执行任何操作。此外，如果要在 jquery 中获取输入的值，请使用 .val() 函数，而不是 .value 。

固定小提琴：http://jsfiddle.net/9kqbue5t/2/

相关文章：