javascript - 关于表单验证的问题？

Question

写表单验证时把每个验证都写的是input onblur事件，
出现一个问题，如果用户直接按那个a标签提交就不走每个input onblur事件，
难道我要重新写每个事件吗？
跟怎样给这个a标签加个点击事件？

<form action="#" method="post">
                    <span class="errorMsg"></span>
                    <p>
                        <label>手机号码：</label>
                        <input id="form_phone" type="text" tabindex="1" autocomplete="off">
                        <em class='error' style="display: none;"></em>
                        <em class='success' style="display: none;"></em>
                        <span class="info_tips">注册成功后请直接用手机号登录</span>
                        <a href="javascript:;" id="sendsms" class="mt5 ml10 blue_big_btn" style="display:none;">发送验证码</a>
                    </p>
                    <p>
                        <label>短信验证码：</label>
                        <input id="phone_code" name="phone_code" type="text" tabindex="2" autocomplete="off">
                        <em class='error' style="display: none;"></em>
                        <em class='success' style="display: none;"></em>
                        <span class="info_tips" >请输入您收到的短信验证码</span>
                    </p>
                    <p>
                        <label>设置密码：</label>
                        <input id="psw1" name="password" type="password" tabindex="3">
                        <em class='error' style="display: none;margin-top: -15px;margin-left: 15px;"></em>
                        <em class='success' style="display: none;margin-top: -15px;margin-left: 15px;"></em>
                        <span class="info_tips pw_spec_tips">6-16位，字母（区分大小写）、数字、符号</span>
                        <span id="pw_strength"></span>
                    </p>
                    <p>
                        <label>确认密码：</label>
                        <input id="psw11" name="new_password" type="password" tabindex="4" disabled="">
                        <em class='error' style="display: none;"></em>
                        <em class='success' style="display: none;"></em>
                        <span class="info_tips">请再次输入您的密码</span>
                    </p>
                    <a id="confirm1" class="blue_btn">立即注册</a>
 </form>

$("#phone_code").on("blur",function(){
        if($(this).val() == ""){
            $(this).next(".error").css("display","inline-block");
            $(this).parent().find(".success").css("display","none");
            $(this).parent().find(".info_tips").text("不能为空").css("color","#FF0000");
        }
        else if(!phone_code_reg.test($(this).val())){
           $(this).parent().find(".success").css("display","none");
           $(this).next(".error").css("display","inline-block");
           $(this).parent().find(".info_tips").text("输入的短信验证码格式不正确").css("color",
               "#FF0000");
        }
        else{
            $(this).parent().find(".error").css("display","none");
            $(this).parent().find(".success").css("display","inline-block");
            $(this).parent().find(".info_tips").text("");
        }
    });
....

Answer 1

不保证有效，可以试试：

$('#confirm1').on('click', function() {
   $(this).closest('form').find('input').triggerHandler('blur);
});

Answer 2

其实，最好的办法是，在提交之前在做一次所有的验证

Answer 3

框架

用个框架jQuery Validation，分分钟搞定

no框架

不想用框架，那么你的代码需要优化

HTML结构

重复的结构太多，css写在行内，混乱不堪，建议调整

<form action="#" method="post" id="form">
    <span class="errorMsg"></span>
    <p>
        <label>手机号码：</label>
        <input id="form_phone" type="text" tabindex="1" autocomplete="off" />
        <span class="info_tips">注册成功后请直接用手机号登录</span>
        <a href="javascript:;" id="sendsms" class="mt5 ml10 blue_big_btn" style="display:none;">发送验证码</a>
    </p>
    <p>
        <label>短信验证码：</label>
        <input id="phone_code" name="phone_code" type="text" tabindex="2" autocomplete="off" />
        <span class="info_tips" >请输入您收到的短信验证码</span>
    </p>
    <p>
        <label>设置密码：</label>
        <input id="psw1" name="password" type="password" tabindex="3" />
        <span class="info_tips pw_spec_tips">6-16位，字母（区分大小写）、数字、符号</span>
        <span id="pw_strength"></span>
    </p>
    <p>
        <label>确认密码：</label>
        <input id="psw11" name="new_password" type="password" tabindex="4" disabled="" />
        <span class="info_tips">请再次输入您的密码</span>
    </p>
    <button id="confirm1" class="blue_btn" type="submit">立即注册</button>
</form>

js

你只贴了一个验证码的代码，如果没看错的话，这样的代码至少还有三个，重复的内容太多，建议调整

    var $form = $('#form');
    var $phoneCode = $('#phone_code');
    var phone_code_reg = /^[0-9]{6}$/;

    $phoneCode.on('blur', validPhoneCode);
    $form.on('submit', submit);


    
    //表单提交        
    function submit() {
        return [
            validPhoneCode()
        ].every(function (flag) {
                    return flag;
                });
    }

    
    //校验手机验证码
    //@return {bool}        
    function validPhoneCode() {
        var val = $phoneCode.val();

        if (!val) {
            showError($phoneCode, '不能为空');
            return false;
        }

        if (!phone_code_reg.test($(this).val())) {
            showError($phoneCode, '输入的短信验证码格式不正确');
            return false;
        }
        showSuccess($phoneCode);

        return true;
    }

    
    //校验失败
    //@param el {jQuery}
    //@param text {String}        
    function showError(el, text) {
        var $parent = el.parent();
        $parent.find('.error').length ? $.noop() : el.after('<em class="error">error</em>');
        $parent.find('.success').remove();
        $parent.find('.info_tips').text(text).css("color", "#FF0000");
    }
    
     //校验成功
     //@param el {jQuery}         
    function showSuccess(el) {
        var $parent = el.parent();
        $parent.find('.success').length ? $.noop() : el.after('<em class="success">success</em>');
        $parent.find('.error').remove();
        $parent.find('.info_tips').text('');
    }

像这种校验，还是建议你用框架。不用框架的话，写起来蛋疼。以上代码纯属参考！