0

我尝试学习 jquery 的基础知识，所以我开始构建自己的 jquery 验证。我尝试构建 jquery 表单验证，但它不起作用。我不知道是什么故障。如果有人有想法，请尝试帮助学习 jquery以更好的方式。我的代码在这里：-

<script src="jquery.min.js" type="text/javascript"></script>
<link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
    $('#submit').click(function(){
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if($('#fname').val()){
            if($('#fname').val()==""){
                $('#err_msg_1').html('fname field is empty');
                return false;
            }else{
                if($('#fname').val().length>=4){
                    $('#err_msg_1').html('letter length is to sort');
                return false;
                }
            }
        }
        if($('#fname').val()){
            if($('#lname').val()==""){
                $('#err_msg_2').html('lname field is empty');
                return false;
            }else{
                if($('#lname').val().length>=4){
                $('#err_msg_2').html('letter length is to sort');
                return false;
            }
        }
        /*if($('.gender').val()==""){*/
            if($('.gender')[0].selectedIndex<=0){
            $('#err_msg_3').html('gender field is empty');
            return false;
        }
        if(filter.test(a)==false){
            //email.addClass("error");
        $('#err_msg_email').html("Type a valid e-mail please");
        //emailInfo.addClass("error");
            return false;
        }



    });return true;
});

</script>

<div class="form">
    <form name="form" methode="POST" action="">
    <div class="container"><div class="fieldname">First Name</div><div class="field"><input name="fname" type="text" id="fname"></div><div class="error" id="err_msg_1"></div></div>
    <div class="container"><div class="fieldname">Last Name</div><div class="field"><input name="fname" type="text" id="lname"></div><div class="error" id="err_msg_2"></div></div>
    <div class="container"><div class="fieldname">Gender</div><div class="field">
    <select name="gender" class="gender" >
        <option value="">---select gender---</option>
        <option value="male">male</option>
        <option value="female">female</option>
    </select>    
    </div><div class="error" id="err_msg_3"></div></div>
    <div class="container"><div class="fieldname">Email</div><div class="field"><input name="email" type="text" id="email"></div><div class="error" id="err_msg_email"></div></div>
    <div class=""><input name="submit" type="submit" id="submit"></div>
    <div id="check"><div>
    </form>
</div>
4

1 回答 1

1

存在语法错误和许多逻辑错误

$(document).ready(function(){
    $('#submit').click(function(){
        if(!$('#fname').val()){
            $('#err_msg_1').html('fname field is empty').show();
            return false;
        }else{
            if($('#fname').val().length <= 4){
                $('#err_msg_1').html('letter length is to sort').show();
                return false;
            }
        }
        $('#err_msg_1').hide();

        if(!$('#lname').val()){
            $('#err_msg_2').html('lname field is empty').show();
            return false;
        }else{
            if($('#lname').val().length<=4){
                $('#err_msg_2').html('letter length is to sort').show();
                return false;
            }
        }
        $('#err_msg_2').hide();

        /*if($('.gender').val()==""){*/
        if(!$('.gender').val()){
            $('#err_msg_3').html('gender field is empty').show();
            return false;
        }
        $('#err_msg_3').hide();

        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(!filter.test(a)){
            console.log('asdf')
            $('#err_msg_email').html("Type a valid e-mail please").show();
            return false;
        }
        $('#err_msg_email').hide();
    });
    return true;
});

演示：小提琴

于 2013-05-27T08:10:53.377 回答