您现在的位置:首页 >> 前端 >> 内容

bootstrap表单基本结构代码教程

时间:2018/1/2 10:22:05 点击:

  核心提示:每天写同一份代码,比较烦。留一份以后复制form class=form-horizontal col-xs-10 col-xs-offset-1 col-sm-12 col-sm-offset-0 m...

每天写同一份代码,比较烦。留一份以后复制

<form class="form-horizontal col-xs-10 col-xs-offset-1 col-sm-12 col-sm-offset-0" method="post" action="index.php"
                        name="myform" enctype="multipart/form-data">
                        <p class="form-group has-feedback">
                            <label for="modalform_name" class="col-sm-2 control-label">您的称呼</label>
                            <p class="col-sm-10">
                                <input type="text" required class="form-control yuyue_name" name="info[enrollName]" placeholder="您的称呼(只能是汉字)">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </p>
                        </p>
                        <p class="form-group has-feedback">
                            <label for="modalform_phone" class="col-sm-2 control-label">您的手机</label>
                            <p class="col-sm-10">
                                <input type="tel" required class="form-control" name="info[enrollPhone]" placeholder="11位手机号码">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </p>
                        </p>
                        <p class="form-group has-feedback">
                            <label for="modalform_district" class="col-sm-2 control-label">您的小区</label>
                            <p class="col-sm-10">
                                <input type="text" required class="form-control" name="info[enrollDistrict]" placeholder="小区名称">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </p>
                        </p>
                        <p class="form-group has-feedback">
                            <label for="modalform_area" class="col-sm-2 control-label">房子面积</label>
                            <p class="col-sm-10">
                                <input type="text" required class="form-control" name="info[enrollArea]" placeholder="装修面积">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                            </p>
                        </p>
                        <input type="hidden" name="info[enrollPage]" value="" class="enrollPage">
                        <input type="hidden" name="info[enrollTime]" value="" class="enrollPage">
                        <p class="form-group">
                            <p class="col-sm-offset-2 col-sm-10">
                                <button type="submit" name="dosubmit" class="btn btn-primary">咨询报价</button>
                            </p>
                        </p>
                    </form>
<a href="#" data-toggle="modal" data-target="#enroll" class="enroll" data-enroll="导航">64332680</a>
// 表单验证
    $('.enroll').click(function () {
        var formurl=window.location.href;
        $('#enroll').find('input[name*=enrollPage]').val(formurl.substr(0,100)+$(this).attr('data-enroll'));
        $('#enroll').find('input[name*=enrollTime]').val((new Date().toLocaleString()));
    });
    (function fsubmit() {
        $('form input[name*=Name]').blur(function () {
            var name = $.trim($(this).val());
            var chinese = /^[\u4e00-\u9fa5]+$/;
            var newValue = chinese.test(name);
            var that = $(this);
            formalert(newValue, that);
        })
        $('form input[name*=Phone]').blur(function () {
            var phone = $.trim($(this).val());
            var RegCellPhone = /^1[0-9]{10}$/;
            var newValue = !(phone.search(RegCellPhone) == -1);
            var that = $(this);
            formalert(newValue, that);
        })
        $('form input[name*=Area]').blur(function () {
            var newValue = $.trim($(this).val());
            var that = $(this);
            formalert(newValue, that);
        })
        $('form input[name*=District]').blur(function () {
            var newValue = $.trim($(this).val());
            var that = $(this);
            formalert(newValue, that);
        })
    })();

    function formalert(value, that) {
        if (!value) {
            that.parent().find('span').addClass('glyphicon-remove').removeClass('glyphicon-ok');
            that.parents('.form-group').removeClass('has-success').addClass('has-error');
            that.val('');
            return false;
        }
        that.parent().find('span').addClass('glyphicon-ok').removeClass('glyphicon-remove');
        that.parents('.form-group').removeClass('has-error').addClass('has-success');
    }

Tags:BO OO OT TS 
作者:网络 来源:齐枫的博客