使用jQuery验证HTML表单中的数字

时间:2014-11-19 17:49:43

标签: jquery

用户在input type =“text”标签中键入一个数字。值必须是正数,因此需要检查两件事:(a)是数字吗?若然,(b)是积极的吗?

这是我的代码(使用jQuery):

 $("input:text").change(function() {   
   if ( !$.isNumeric( $(event.target).val() )) {  
      $(this).focus();  
      alert("You must input a number (no text)");  
   }  
   else if ( $(event.target).val() < 0 ) {  
      $(this).focus();  
      alert("You must input a positive number");   
   }  
});   

此代码放在就绪处理程序中,因此只要用户更改单元格的内容,它就会立即响应。更改单元格的内容时,当用户在该文本框外部单击时,将运行事件处理程序。如果新值不是数字或是负数,则焦点将返回问题文本框并弹出警报。一切都很好!但是,我有一个小问题。

将焦点返回到问题文本框后,如果用户在没有对不正确的文本进行必要更改的情况下单击其他位置,则不会发生任何操作并保留不正确的文本。原因是这次没有“改变”,所以事件处理程序没有做出反应。

在这里寻找想法。如何将用户锁定到问题元素中,强制他们在能够离开该文本框之前修复错误?非常感谢你帮助我!

=============================================== =============

我刚才有个主意。如果我可以在用户将其更改为正数以外的值时恢复之前的值,该怎么办?换句话说,现在单元格中有一个有效数字,但是用户将其更改为文本,因此弹出警报并且单元格的值将恢复为之前的有效数字。

代码“$(event.target).val()”在更改后获取值,但是有什么方法可以在更改之前恢复该单元格中的值吗?那我可以做 - &GT; “$(this).val(之前的值);”把它放回去并替换不正确的文字。沿着这条线的任何建议将不胜感激!谢谢!

2 个答案:

答案 0 :(得分:0)

here's the link

的javascript:

$(document).ready(function(){
     var number_pat= /^-?(\d+\.?\d*)$|(\d*\.?\d+)$/;
    $("#test").focusout(function(){
        var val=$('#test').val();
        if(val.match(number_pat)==null && val!='')
        {
            alert('input a number(no text)');
            $('#test').addClass('error');
        }
       else if(val<0)
       {
           $('#test').addClass('error');
           alert('input a positive number');
       }
        else
           $('#test').removeClass('error');
    });


});

HTML:

<input type="text"  id='test'>

答案 1 :(得分:0)

尝试parseInt插入的值,然后测试它

$("input[type=text]").change(function() {   
    var value=parseInt($(this).val());

   if ( !$.isNumeric( value )) {  
      $(this).focus();  
      alert("You must input a number (no text)");  
   }  
   else if ( value < 0 ) {  
      $(this).focus();  
      alert("You must input a positive number");   
   }  
});

在JSFiddle http://jsfiddle.net/h5xm1vuj/

中找到此代码

无论如何,对于许多有用的验证选项,请检查Parsley Validator