如何验证表单的输入值答案

【问题标题】：How to validate a form's input value如何验证表单的输入值
【发布时间】：2013-05-06 15:08:59
【问题描述】：

我正在尝试使用 jQuery 和 javascript 单击按钮后验证表单的输入值。

现在，如果我为输入输入一个值并单击提交，输入字段和按钮就会消失。知道我在这里有什么问题吗？

HTML 文件...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
            <form>
                <input type="text" id='input_1'>
                <input type="submit" value="Send" id="send">
            </form>   
    </body>
</html>

脚本文件...

$(document).ready(function() {
    $('.send').click(function() {
        validateInput(document.getElementById('#input_1'));
        function validateInput(inputValue){
             if (inputValue === 3) {
             alert("Element cannot be equal to 3");
             }
        }
    });
});

【问题讨论】：

Best jQuery Form Plugin. Easily validate anything useing "beforeSubmit" option
click(function(event) { event.preventDefault(); 将停止执行表单提交
另外不要使用click()。请使用on('click',...
首先是你不阻止它发送请求，其次是更语义化。
你是对的，但我认识和讨论这个问题的大多数程序员更喜欢on。只是因为这比$('button').click 更具可读性。

标签： javascript jquery validation input

【解决方案1】：

$(document).ready(function() {
    $('#send').live('click',function() { //Because send is the id of your button
        if(validateInput(document.getElementById('#input_1'))){
            alert("Element cannot be equal to 3");
            return false;
         }
         else{
             //Do something else
         }
        function validateInput(inputValue){
             if (inputValue == 3) {
             return false;//Will prevent further actions
             }
        }
    });
});

【讨论】：

我看到我在使用 .而不是 # 用于发送按钮。我还按照您的建议包含了“return false;//将阻止进一步的操作”。点击发送后，输入和按钮仍然消失。还有其他想法吗？
使用.on() 或.delegate() 而不是.live()。直播已弃用！
返回false必须在click函数内部，而不是validateInput()。
或者像这样调用validateInput：return validateInput(arg) 并在函数中保持返回 false。
这可以防止输入和按钮消失，但如果我输入 3，则警报不会执行。

【解决方案2】：

这个$('.send').click(function() { 应该是$("#send").click(function() {。注意哈希符号而不是点 (.)，如果选择器是类，则使用点，而如果选择器是 ID，则使用 #。

2.您应该将验证功能移到$(document).ready(function()之外。希望对您有所帮助

【讨论】：

【解决方案3】：

感谢大家的回复。不幸的是，我无法使用您的建议使其正常工作。我决定使用 jQuery 来获取元素并将消息附加到 div 而不是使用警报。这是一种不同的方法，但最终奏效了。

HTML...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
            <form>
                <input type="text" name="input"/>

            </form>
            <button id="send">Send</button>
            <div class="error">
            </div>
    </body>
</html>

脚本...

$(document).ready(function() {
    $('#send').click(function(){ 
    var toValidate = $('input[name=input]').val();
    if (toValidate == 3) {
    jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is    invalid" + '</div>');
    }
    else {
        jQuery('.message').html('');
        $('.error').append('<div class="message">' + toValidate + " is valid" + '</div>');
         }

    });
});

【讨论】：