jquery表单验证,确定必须字段不留空,为数字

来源：互联网发布：甄嬛传演技知乎编辑：程序博客网时间：2024/05/01 13:22

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证,确定必须字段不留空</title>
<link href="style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
   /*
        确认输入字段不是空白,否则显示错误消息

    $(document).ready(function(){
        $('.error').hide();
        $('.submit').click(function(event){
            var data = $('.infobox').val();     
            var len = data.length;
            if(len < 1){
                $('.error').show("slow");
                event.preventDefault();         
            }else{
                $('.error').hide();
            }
        });
    });*/
    /*
        只允许输入数字
    */
    $(document).ready(function(){
        $('.error').hide();
        $('.submit').click(function(event){
            var data = $('.infobox').val();
            var len = data.length;
            var c;
            if(len > 0){
                    for(var i=0; i<len; i++){
                    c = data.charAt(i).charCodeAt();    
                        if(c==45 || i==0){ 
                            continue;
                        }
                        if(c < 48 || c > 57){
                            $('.error').show("slow").html("必须为数值！");
                            event.preventDefault();
                        }else{
                            $('.error').hide();
                        }
                    }
            }
            if(len == 0){           
                $('.error').show("slow").text("不能为空！");
                event.preventDefault();
            }
            if(len > 0 && len == 1){
                c = data.charAt(0).charCodeAt();
                if(c < 48 || c > 57){
                    $('.error').show("slow").html("必须为数值！");
                    event.preventDefault();
                }else{
                    $('.error').hide();
                }
            }
        });
    });
</script>
</head>

<body>
    <form action="" method="post" id="signup">
        <div>
            <span class="label">User ID</span><input type="text" class="infobox" name="userid"/>
            <span class="error" style="border:#F00 solid 1px; font-size:10pt;">此项不能为空</span>
        </div>
        <input type="submit" class="submit" vaslue="提交"/>
    </form>
</body>
</html>