jquery - jQuery HTML5 输入有效活

Question

我有一个如下所示的输入字段：

<input type="number" id="month" placeholder="Month" min="1" max="12" required>

问题

• 当我以表格形式使用它时，它需要一个介于 1 和 12 之间的数字。
• 我使用jQuery通过keyup复制信息，在我的例子中是href。在这种情况下，它不受该领域的任何要求的“保护”。

例子

不应该是有效的：

<a href="?month=abc">

应该是有效的：

<a href="?month=12">

我可以以某种方式使用内置 HTML5 输入的验证吗？我有不同的领域有不同的要求。

Answer 1

当您在 上捕获值时，keyup您可以使用该isNaN函数检查它是否为数字。这也将验证小数，因此您需要检查是否没有小数。

if (!isNaN(someValue)){
   //your code to add to href
}

Answer 2

首先，您可以使用 HTML5 表单验证 API。但这需要浏览器支持此 API，或者您正在使用 polyfill。目前 FF4+、IE10+、Chrome 和 Safari 都支持 API。但是FF并不完全支持数字类型。

如果您想使用 HTML5-API：

1. 使用 input 事件而不是 keyup 事件。这对您的任务（思考、粘贴、剪切等）来说是更好的事件。

2. 只需使用 :valid Selector 进行测试，输入是否有效（如果没有 polyfill，IE9- 会报错）

我为你准备了一个简单的解决方案，它使用 webshims 为你填充 API。

但老实说，我质疑你的方法。您可以简单地使用带有按钮、适当的操作属性和名为 type="number" 的月份的表单，而不是为您的解决方案使用链接 + JS，并且根本不需要添加 JS。代码可能如下所示，您可以免费获得 HTML 表单验证：

<form action="#">
    <div>
        <button class="text" type="submit">to month: </button> 
        <input type="number" name="month" placeholder="Month" min="1" max="12" required value="1" size="2" />
    </div>
</form>

我的示例还展示了如何将按钮样式设置为链接。

Answer 3

我从你的问题中得到的只是你想<a>从 jquery 验证标签

$("a[href*='month']").click(function(event){
    var value=$(this).attr("href");
    value=value.split("=");
    var temp=value[1];
    alert(temp);
    if(isNaN(temp)){
        event.preventDefault();
        alert("not a number");
    }
    else if(temp<1||temp>12){
        event.preventDefault();
        alert("invalid month");
    }
});

编辑：
感谢杰克的评论，这里是问题的可能解决方案

$("#month").keyup(function(){
    //Add your copying code here, and edit $atag accordingly 
    var $atag=$("a[href*='month']");
    var value=$(this).val();
    if(isNaN(value)){
        $atag.attr("disabled","disabled");
    }
    else if(value<1||value>12){
        $atag.attr("disabled","disabled");
    }
    else $atag.removeAttr("disabled");
});