Javascript 如何使用jQuery验证按钮单击时的文本字段？

当我单击按钮时，如何使用jQuery验证文本框是否为空且由数字组成

这是我目前掌握的代码：

HTML:

我必须在表单中使用jQuery验证才能使其工作吗？

看看这个

---

您可以使用

在不使用jQuery的情况下执行此操作，完整代码如下：

<form>
  <input type="number" id="element" name="element" required />
  <input type="submit" value="Go">
</form>

---

无需jQuery插件即可完成此操作。您只需要一个简单的正则表达式来验证输入格式。您可以为不同类型的输入自定义它

<script language="javascript" type="text/javascript">  

function validate_input( inputText)
    {
        if( inputText.length > 0 )
        {
            // Search for non-digit pattern (\D) globally
            var patt=/\D/g ;

            if( patt.test( inputText ) )
                return false;
            else
                return true;
        }
        else
            return false;
    }

$(document).ready(function () 
{      
    $("#add").click(function () 
    {

        if( validate_input( $("#element").val() ) )
        {
            $("#result").html("<label> good </label>");
        }
        else
        {
            $("#result").html("<label> error </label>");
        }
    });

});     

函数验证输入（inputText）
{
如果（输入文本长度>0）
{
//全局搜索非数字模式（\D）
变量patt=/\D/g；
如果（部分测试（输入文本））
返回false；
其他的
返回true；
}
其他的
返回false；
}
$（文档）.ready（函数（）
{      
$（“#添加”）。单击（函数（）
{
if（验证输入（$（“#元素”）.val（））
{
$（“#结果”）.html（“好”）；
}
其他的
{
$（“#结果”）.html（“错误”）；
}
});
});     

---

请记住，并非所有浏览器都支持输入元素的

number

类型。这是非常正确的。我想提供另一种解决方案，而不是立即转向jQuery。ShankarSangoli或多或少覆盖了jQuery位。这是否检查该值是否为数字？这对我来说是必要的。另外，当我提交此表单时，如何调用javascript函数？它将检查它们是否是数字，如果不是，则不允许提交。至于调用函数，我相信应该在

type=“submit”

click上。嘿：）你能告诉我我的代码哪里错了，以及我应该在验证文档中查找的地方吗？你需要在表单元素上使用validate。Rest jquery会处理好的。在验证之后，我必须使用Javascript向表单添加一些动态内容。当我提交表单时，页面刷新，动态内容丢失。你有没有一个关于如何避免这种情况的例子？我想我必须使用ajax是的，你必须使用ajaxthis@Nanek-检查我编辑的答案我已经展示了如何使用ajax提交表单，希望对您有所帮助。这非常有效，我可以在没有表单和ajax的情况下使用它。谢谢

//AJAX way to submit the form

$("form").submit(function(e) {
    e.preventDefault();

    $.post( {
       url: $(this).attr("action"), 
       data: $(this).serialize(),
       success: function(){ 

           //Write code here to handle on success 

        }
    });
});

<form>
  <input type="number" id="element" name="element" required />
  <input type="submit" value="Go">
</form>

$(document).ready(function() {
    $("form").validate({
        rules: {
            element: {
                required: true,
                number: true
            }
        },
        errorHandler: function () {
            $("#result").append("error");
        },
        submitHandler: function () {
            $("#result").append("good");
        }

    });

    $('#add').click(function() {
        $('form').validate();
    });
});

<script language="javascript" type="text/javascript">  

function validate_input( inputText)
    {
        if( inputText.length > 0 )
        {
            // Search for non-digit pattern (\D) globally
            var patt=/\D/g ;

            if( patt.test( inputText ) )
                return false;
            else
                return true;
        }
        else
            return false;
    }

$(document).ready(function () 
{      
    $("#add").click(function () 
    {

        if( validate_input( $("#element").val() ) )
        {
            $("#result").html("<label> good </label>");
        }
        else
        {
            $("#result").html("<label> error </label>");
        }
    });

});