jquery 表单验证

思路：首先，写onblur事件，当失去焦点时执行js，在input后边写一个span里边用来放置错误信息，然后提交时用onsubmit拦截，注意函数前要写return，否则拦截将会失败，这就实现了提交时候会吧所有表单验证一遍，从而提示错误信息！自己写的，写的不好还请指教！

先上图再说：

代码如下：

 <form class="form-horizontal" role="form" action="" method="post" οnsubmit="return check_submit()">
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">地产商名称</label>

                                <div class="col-sm-9">
                                    <input type="text" id="form-field-1" name="name" οnblur="check_name()" placeholder="房地产名称" class="col-xs-10 col-sm-5" />
                                    <span class="error_msg"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">地址</label>

                                <div class="col-sm-9">
                                    <input type="text" id="form-field-2" name="address" οnblur="check_address()" placeholder="地址" class="col-xs-10 col-sm-5" />
                                    <span class="error_msg"></span>

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" >法定代表人</label>

                                <div class="col-sm-9">
                                    <input type="text" name="legal_people" οnblur="check_legal_people()" id="form-field-tags1" value="" placeholder="法定代表人" />
                                    <span class="error_msg"></span>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" >职务</label>

                                <div class="col-sm-9">
                                    <input type="text" name="duty" id="form-field-tags2" οnblur="check_duty()" value="" placeholder="职务" />
                                    <span class="error_msg"></span>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right3">签约负责人</label>

                                <div class="col-sm-9">
                                    <input type="text" name="contract_people" οnblur="check_contract_people()" id="form-field-tags3" value="" placeholder="签约负责人" />
                                    <span class="error_msg"></span>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" >手机</label>

                                <div class="col-sm-9">
                                    <input type="text" name="phone" id="form-field-tags4" οnblur="check_phone()" value="" placeholder="手机" />
                                    <span class="error_msg"></span>

                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" >电弧</label>

                                <div class="col-sm-9">
                                    <input type="text" name="tel" id="form-field-tags5" value="" placeholder="电话" />

                                </div>
                            </div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-3 col-md-9">
                                    <button class="btn btn-info" type="submit">
                                        <i class="icon-ok bigger-110"></i>
                                        提交
                                    </button>

                                    &nbsp; &nbsp; &nbsp;
                                    <button class="btn" type="reset">
                                        <i class="icon-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->

</div><!-- /.main-container -->
<script>
    function check_name(){
        var self = $("#form-field-1");
        var name = self.val();
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test(name) && name.length < 16) {
            self.next().html('');
            return true;
        } else {
            self.next().html('必须输入中文，且长度不超过16个字！');
            return false;
        }
    }
    function check_address(){
        var self = $("#form-field-2");
        var name = self.val();
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test(name) && name.length < 16) {
            self.next().html('');
            return true;
        } else {
            self.next().html('必须输入中文，且长度不超过16个字！');
            return false;
        }
    }
    function check_legal_people(){
        var self = $("#form-field-tags1");
        var name = self.val();
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test(name) && name.length < 5) {
            self.next().html('');
            return true;
        } else {
            self.next().html('必须输入中文，且长度不超过5个字！');
            return false;
        }
    }
    function check_duty(){
        var self = $("#form-field-tags2");
        var name = self.val();
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test(name) && name.length < 5) {
            self.next().html('');
            return true;
        } else {
            self.next().html('必须输入中文，且长度不超过5个字！');
            return false;
        }
    }
    function check_contract_people(){
        var self = $("#form-field-tags3");
        var name = self.val();
        var myReg = /^[\u4e00-\u9fa5]+$/;
        if (myReg.test(name) && name.length < 5) {
            self.next().html('');
            return true;
        } else {
            self.next().html('必须输入中文，且长度不超过5个字！');
            return false;
        }
    }
    function check_phone(self){
        var self = $("#form-field-tags4");
        var name = self.val();
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if (myreg.test(name)) {
            self.next().html('');
            return true;
        } else {
            self.next().html('手机号格式不正确！');
            return false;
        }
    }
    function check_submit(){
        if(check_name() == true && check_address() == true && check_legal_people() == true && check_duty() == true && check_contract_people() == true && check_phone() == true){
            return true;
        }else{
            check_name();check_address();check_legal_people();check_duty();check_contract_people();check_phone();
            return false;
        }

    }
</script>