如何使用 jquery 来验证它？答案

【问题标题】：how to using jquery to validate it?如何使用 jquery 来验证它？
【发布时间】：2011-06-12 05:29:17
【问题描述】：

有一个输入类型框是这样的：

   <input type="text" name="xlnum" id="xlnum" />
<input type="submit" value="Submit" id="submit" />

在文本框中输入的允许值是数字。但它的风格必须是这样的：

number1,number1,number1,number1,number1.... eg(1,2,,12,35,654,....)

如果用户输入了错误的样式。我想给他一个使用 jquery 的小费。我该怎么做。我不知道如何写if 部分。例如：

$('#submit').click(function() {
 if($('#xlnum').val()=='' && ...)...
})

【问题讨论】：

需要正则表达式见：stackoverflow.com/questions/3455988/…

标签： jquery

【解决方案1】：

<html>                                                                  
<head>                                                                  
<link rel="stylesheet" type="text/css" href="thickbox.css">
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">                                         
$(document).ready(function() {

    $('#csv').submit(function(event){
        var $mkay = $('#msg').text();
        console.log("kk:" +$mkay);

        if ($mkay != "mkay"){
            event.preventDefault(); // stop submission
        }



    });

    $('#go').click(function() {

        var val = $('#numbaz').attr('value');

        if ( val.match(/[[\d]+[,]?]?/)){
            $('#numbaz') .css('background','green');
            $('#msg').text("mkay");
        } else {
            $('#numbaz') .css('background','red');
        }

        $('#csv').submit(); // resubmit
    })
});
</script>
</head>
<body>
<form method="get" id="csv">
<input id="var" type="hidden" name="var" value="trolololol" />
<input id="numbaz"  type="text" name="numbaz" value="" />
<input id="go"      type="submit"  value="go" />
</form>
<p id="msg"><p>
</body>
</html>

砰！

这是我所知道的最简单的表单验证方法。确保您的 jquery.js 足够新。除了版本 1.6.1，我没有测试过任何其他版本。而且我认为其他人的正则表达式更优雅。

我上面的那个人失败了，哈哈。我认为他的方法有点短而整洁，但怀疑它是否有效。我是对的。它进入无限递归。

【讨论】：

【解决方案2】：

我认为以下内容对您有用：

$('#submit').closest('form').submit(function(e)
{
  // Validate that the input is in the proper format.
  if ( ! $('#xlnum').val().match(/^\d+(,\d+)*$/) )
  {
    alert('Please enter a valid value.');

    return false;
  }
});

您会注意到我使用了 $('#submit').closest('form').submit() 而不是 $('#submit').click()。为了以防万一，最好在表单的提交事件而不是按钮上应用验证。如果为表单分配 ID 属性，则可以将该行缩短为 $('#form').submit(function(e)...

【讨论】：

zhuanzhou，我犯了一个小错误，已在上面的示例中更正。我已经测试并确保上面的代码按预期工作。很抱歉给您带来不便。
完全没有，但对我来说也有一个错误。当我使用这个 $('#submit').closest('form').submit(function(e). 代码不能工作。如果我把它改成 $('#submit').click(function( e). 代码没问题。
您的输入和提交按钮是否包含在 FORM 元素中？要成为有效的 HTML，它应该是。如果你没有，那就是原因。它正在寻找最接近按钮的表单（向上层级）。