我如何验证一个文本字段上的按钮点击与jQuery

How do i validate a textfield on button click with jQuery?

本文关键字：按钮 jQuery 字段 一个 何验证 验证 文本      更新时间：2023-09-26

我如何使用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验证内的一个窗体为它的工作吗?

你不需要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>");
        }
    });
});

你可以不使用jQuery使用<input type="number" id="element" name="element" required />和完整的代码:


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

看看这个

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 
        }
    });
});
相关文章：