jquery 表单验证

来源：互联网发布：win7 tcp监听端口阻塞编辑：程序博客网时间：2024/06/04 18:25
思路：首先，写onblur事件，当失去焦点时执行js，在input后边写一个span里边用来放置错误信息，然后提交时用onsubmit拦截，注意函数前要写return，否则拦截将会失败，这就实现了提交时候会吧所有表单验证一遍，从而提示错误信息！自己写的，写的不好还请指教！
先上图再说：
代码如下：
 <form class="form-horizontal" role="form" action="" method="post" onsubmit="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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="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" onblur="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>
1 0