Question

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

这是我到目前为止的代码：

HTML：

<input type="button" name="Tilføj" value="Tilføj" id="add" />
<input type="text" id="element" name="element" />
<div id="result"></div>

使用Javascript：

$(document).ready(function () {

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

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

        });

    });
});

我是否必须在表单中使用jQuery验证才能使用？

Answer 1

您可以在没有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>");
        }
    });

});

Answer 2

看看这个

http://docs.jquery.com/Plugins/validation

//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 

        }
    });
});

Answer 3

你可以在没有jQuery的情况下使用<input type="number" id="element" name="element" required />并且完整代码为：


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

Answer 4

$(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();
    });
});

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

4 个答案: