在原有基础上增加jquery验证小数值文本框

$(document).ready(function() {
            els = $(".rlnumber");
            els.each(function (index, obj) {
                var $this = $(this);
                $this.bind("keyup", function () {
                    var v = $this.val();
                    $this.val(v.replace(/\D|^0/g, '0'));
                });
            });
            els.mouseenter(function(){
            $(this).focus();
        }).keypress(function(event){
            var keycode = event.which;
            if((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8){
                event.preventDefault();
            }
        });
            });
         document.onkeydown = KeyDown;
            function KeyDown(){
                var gk=event.keyCode;
                if(gk==13) {
                    event.keyCode = 9;
                    return;
                }
            }已经实现了表单中CLASS等于rlnumber的文本框只能输入整数,现在要增加一个CLASS等于FNUM的文本框可以输入整数或小数,怎么修改此JS代码啊?望高手指点,请考虑效率问题,因为文本框比较多

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

在$(document).ready()里面加上$(".FNUM").mouseenter(function () {
            $(this).focus();
        }).keypress(function (event) {
            var keycode = event.which;
            if ((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8 && keycode != 46) {
                event.preventDefault();
            }
        }).keyup(function (event) {
            var obj = $(this)[0];
            obj.value = obj.value.replace(/[^\d.]/g, "");
            obj.value = obj.value.replace(/^\./g, "");
            obj.value = obj.value.replace(/\.{2,}/g, ".");
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        });
我这有个现成的,只是IE8下有些bug,间隔性触发,正好发出来让大婶们帮忙改改<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
        <script src="../script/jquery-1.6.2.min.js" type="text/javascript"></script>    <script type="text/javascript">
        $.fn.extend({
            decimal: function(len, x) {
                var str;
                if (x == 0) {
                    str = "^(?!0{2,})(?!0\\d+)\\d{0," + len + "}$"; //小数位0
                } else if (x == 1) {//小数位1
                    str = "^(?!0{2,})(?!0\\d+)(?:\\d{1," + (len - x) + "}\\.?[\\d+]{0," + x + "})(?!\\.)$";
                } else {//decimal(12,2) 有效长度12,小数位2
                    str = "^(?!0{2,})(?!0\\d+)(?:\\d{1," + (len - x) + "}\\.?[\\d+]{0," + x + "}|\\d{1," + ((len - x) + 1) + "}\\.?[\\d+]{0," + (x - 1) + "})(?!\\.)$";
                }
                var reg = new RegExp(str);
                this.bind("propertychange", function() {
                    if (this.value.length > 0) {
                        if (!reg.test(this.value)) {
                            this.value = this.value.substring(0, this.value.length - 1);
                        }
                    }
                    return true;
                });
                return this;
            }
        });
        window.onload = function() {
            $("input[type='text']").decimal(3, 0);
        };
    </script>
</head>
<body>
<input type="text" />
</body>
</html>
$(document).ready(function() {
$(".FNUM").mouseenter(function () {
            $(this).focus();
        }).keypress(function (event) {
            var keycode = event.which;
            if ((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8 && keycode != 46) {
                event.preventDefault();
            }
        }).keyup(function (event) {
            var obj = $(this)[0];
            obj.value = obj.value.replace(/[^\d.]/g, "");
            obj.value = obj.value.replace(/^\./g, "");
            obj.value = obj.value.replace(/\.{2,}/g, ".");
            obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        });            els = $(".rlnumber");
            els.each(function (index, obj) {
                var $this = $(this);
                $this.bind("keyup", function () {
                    var v = $this.val();
                    $this.val(v.replace(/\D|^0/g, '0'));
                });
            });
            els.mouseenter(function(){
            $(this).focus();
        }).keypress(function(event){
            var keycode = event.which;
            if((keycode < 48 || keycode > 57) && keycode != 0 && keycode != 8){
                event.preventDefault();
            }
        });
            });
         document.onkeydown = KeyDown;
            function KeyDown(){
                var gk=event.keyCode;
                if(gk==13) {
                    event.keyCode = 9;
                    return;
                }
            }
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="jquery.js" ></script>
</head>
<body>
<input type="text" class="rlnumber"/>
<input type="text" class="FNUM"/>
<script>
$('input.rlnumber').keypress(function(event){
var keycode = event.which;
if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){
event.preventDefault();
}
});
$('input.FNUM').keypress(function(event){
var keycode = event.which,
val = this.value;
if(keycode === 46){
if(/\./.test(val)){
event.preventDefault();
}
return;
}else if((keycode !== 0 && keycode !== 8 && keycode !== 13 && keycode < 48) || keycode > 57){
event.preventDefault();
}
}).change(function(){
var val = this.value;
if(/^\./.test(val)){
this.value = 0 + val;
}
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="jquery.js" ></script>
</head>
<body>
<input type="text" class="rlnumber"/>
<input type="text" class="FNUM"/>
<script>
$('input.rlnumber').keypress(function(event){
var keycode = event.which;
if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){
event.preventDefault();
}
});
$('input.FNUM').keypress(function(event){
var keycode = event.which,
val = this.value;
if(keycode === 46){
if(val === '' || val === null){
this.value = 0;
}else if(/\./.test(val)){
event.preventDefault();
}
return;
}else if((keycode !== 0 && keycode !== 8 && keycode !== 13 && keycode < 48) || keycode > 57){
event.preventDefault();
}
});
</script>
</body>
</html>
功能就是所有的INPNT文本框都支持回车换行,然后2个CLASS类型的文本框一个只能输入整数,一个可以输入小数
楼上的几个JS 用哪个好啊?
但是我看你语句里面有把回车转化为tab的部分呢？
是的,所有的INPNT文本框都支持回车换行
那不叫换行。我是觉得6楼写得更好的，不过他把这部分删除了，就是这样document.onkeydown = KeyDown;
            function KeyDown(){
                var gk=event.keyCode;
                if(gk==13) {
                    event.keyCode = 9;
                    return;
                }
            }你先备份一下再试着改就好
我看6楼部分代码重复了
if((keycode != 0 && keycode != 8 && keycode != 13 && keycode < 48) || keycode > 57){
                event.preventDefault();
            }
我删了当然没用了。。<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="jquery.js" ></script>
</head>
<body>
<form>
    <input type="text" class="rlnumber"/>
    <input type="text" class="FNUM"/>
</form>
    <script>
     (function($){
     function isLawfulChar(key){
     var boolean = (key !== 0 && key !== 8 && key !== 13 && key < 48) || key > 57;
     return !boolean;
     }
     function getInputBox($form){
     var elem1 = $form.find('select, textarea'),
     elem2 = $form.find('input:visible:enabled').not('[type=button], [type=submit], [type=reset]');
     return elem1.add(elem2);
     }
     function isInputBox($elem){
     var ret;
     if($elem.is('textarea, select')){
     ret = true;
     }else if($elem.is('input')){
     if($elem.is('[type=button], [type=submit], [type=reset], [type=hidden]')){
     ret = false;
     }else{
     ret = true;
     }
     }
     return ret;
     }
        $('input.rlnumber').keypress(function(event){
            var keycode = event.which;
            if(isLawfulChar(keycode)){
                event.preventDefault();
            }
        });
        $('input.FNUM').keypress(function(event){
            var keycode = event.which,
                val = this.value;
            if(keycode === 46){
                if(val === '' || val === null){
                    this.value = 0;
                }else if(/\./.test(val)){
                    event.preventDefault();
                }
            }else if(isLawfulChar(keycode)){
                event.preventDefault();
            }
        });
        $('form').keydown(function(event){
         var target = $(event.target);
         if(!isInputBox(target) || event.keyCode !== 13){
         return;
         }
             var boxs = getInputBox($(this)),
             index = boxs.index(target);
             if(index === box.length){
             this.submit();
             }else{
             boxs.eq(index + 1).focus();
            }
        });
        })(jQuery);
    </script>
</body>
</html>
鼠标放在文本框上自动选中,是不是也被你删除了这样改?
$(this).focus();
我放在BODY里了还是一样什么作用都没有
望真高手或者6楼的高手说明下写的代码是怎么用啊?
代码都给你了，自己不会看吗。。不看代码永远不会进步<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="jquery.js" ></script>
    <style>
     form{
     margin: 40px 15%;
     border: 1px solid black;
     width: 70%;
     }
     label{
     display: inline-block;
     width: 60px;
     }
     input[type="text"], select, textarea{
     width: 60%
     }
     #btn-set, h3#formHead{
     text-align: center;
     }
     h3#formHead{
     color: white;
     background-color: blue;
     padding: 15px;
     margin: 0px;
     }
    </style>
</head>
<body>
<form id="testForm" name="testForm" action="http://www.baidu.com" method="POST">
<h3 id="formHead">Test Form</h3>
<fieldset>
<label for="intBox">Int</label>
    <input name=intBox" type="text" class="rlnumber" />
</fieldset>
<fieldset>
<label for="floatBox">Float</label>
    <input name="floatBox" type="text" class="FNUM" />
</fieldset>
<fieldset>
<label for="radio">radio</label>
    <input type="radio" name="radio" value="1" checked="checked" />
    <span>radio-1</span>
    <input type="radio" name="radio" value="2" />
    <span>radio-2</span>
</fieldset>
<fieldset>
<label for="select">Select</label>
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</fieldset>
<fieldset id="btn-set">
    <input id="ok" type="button" value="submit" />
    <input type="reset" value="reset" />
</fieldset>
</form>
    <script>
     (function($){
     function isLawfulChar(key){
     var result = (key !== 0 && key !== 8 && key < 48) || key > 57;
     return !result;
     }
     function getInputBox($form){
     return $form.find('select, textarea, input:visible:enabled');
     }
     function isInputBox($elem){
     return $elem.is('textarea, select, input');
     }

        $('form').keypress(function(event){
         var target = $(event.target),
         keycode = event.which;
         if(!target.is('input.rlnumber, input.FNUM')){
         return;
         }
         if(keycode === 46 && target.is('input.FNUM')){
         if(val === '' || val === null){
                    this.value = 0;
                }else if(/\./.test(val)){
                    event.preventDefault();
                }
         }else if(!isLawfulChar(keycode)){
                event.preventDefault();
            }

        }).keyup(function(event){
         var target = $(event.target);
         if(event.keyCode !== 13 || !isInputBox(target) || target.is('[type=button], [type=submit], [type=reset]')){
         return;
         }
             var boxs = getInputBox($(this)),
             index = boxs.index(target);
             if(index === boxs.length){
             this.submit();
             }else{
             boxs.eq(index + 1).focus();
            }
            return false;
        }).mouseover(function(event){
         var target = $(event.target);
         if(isInputBox(target)){
         target.select();
         }
        });
        $('#ok').click(function(){
         $(this).closest('form').get(0).submit();
        });
        })(jQuery);
    </script>
</body>
</html>
上面有点小错误，粗心是魔鬼。。<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <script src="jquery.js" ></script>
    <style>
     form{
     margin: 40px 15%;
     border: 1px solid black;
     width: 70%;
     }
     label{
     display: inline-block;
     width: 60px;
     }
     input[type="text"], select, textarea{
     width: 60%
     }
     #btn-set, h3#formHead{
     text-align: center;
     }
     h3#formHead{
     color: white;
     background-color: blue;
     padding: 15px;
     margin: 0px;
     }
    </style>
</head>
<body>
<form id="testForm" name="testForm" action="http://www.baidu.com" method="POST">
<h3 id="formHead">Test Form</h3>
<fieldset>
<label for="intBox">Int</label>
    <input name=intBox" type="text" class="rlnumber" />
</fieldset>
<fieldset>
<label for="floatBox">Float</label>
    <input name="floatBox" type="text" class="FNUM" />
</fieldset>
<fieldset>
<label for="radio">radio</label>
    <input type="radio" name="radio" value="1" checked="checked" />
    <span>radio-1</span>
    <input type="radio" name="radio" value="2" />
    <span>radio-2</span>
</fieldset>
<fieldset>
<label for="select">Select</label>
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</fieldset>
<fieldset id="btn-set">
    <input id="ok" type="button" value="submit" />
    <input type="reset" value="reset" />
</fieldset>
</form>
    <script>
     (function($){
     function isLawfulChar(key){
     var result = (key !== 0 && key !== 8 && key < 48) || key > 57;
     return !result;
     }
     function getInputBox($form){
     return $form.find('select, textarea, input:visible:enabled');
     }
     function isInputBox($elem){
     return $elem.is('textarea, select, input');
     }

        $('form').keypress(function(event){
         var target = $(event.target),
         keycode = event.which;
         if(!target.is('input.rlnumber, input.FNUM')){
         return;
         }
         if(keycode === 46 && target.is('input.FNUM')){
         var val = target.val();
         if(val === '' || val === null){
                    target.val(0);
                }else if(/\./.test(val)){
                    event.preventDefault();
                }
         }else if(!isLawfulChar(keycode)){
                event.preventDefault();
            }

        }).keyup(function(event){
         var target = $(event.target);
         if(event.keyCode !== 13 || !isInputBox(target) || target.is('[type=button], [type=submit], [type=reset]')){
         return;
         }
             var boxs = getInputBox($(this)),
             index = boxs.index(target);
             if(index === boxs.length){
             this.submit();
             }else{
             boxs.eq(index + 1).focus();
            }
            return false;
        }).mouseover(function(event){
         var target = $(event.target);
         if(isInputBox(target)){
         target.focus();
         }
        });
        $('#ok').click(function(){
         $(this).closest('form').get(0).submit();
        });
        })(jQuery);
    </script>
</body>
</html>
还是有问题,光标在其他CLASS的文本框上,回车就直接提交表单了,没有转换为TAB
表单中不止2个类型CLASS文本框,所有文本框都支持回车TAB键,现在除了 class="rlnumber"/class="FNUM"这两个类型的文本框支持TAB键,其他的不支持