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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值