bootstrap表单基本结构代码

浅浅的花香味﹌ 2022-06-02 02:58 155阅读 0赞

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

<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">
                            <div class="form-group has-feedback">
                                <label for="modalform_name" class="col-sm-2 control-label">您的称呼</label>
                                <div 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>
                                </div>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="modalform_phone" class="col-sm-2 control-label">您的手机</label>
                                <div 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>
                                </div>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="modalform_district" class="col-sm-2 control-label">您的小区</label>
                                <div 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>
                                </div>
                            </div>
                            <div class="form-group has-feedback">
                                <label for="modalform_area" class="col-sm-2 control-label">房子面积</label>
                                <div 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>
                                </div>
                            </div>
                            <input type="hidden" name="info[enrollPage]" value="" class="enrollPage">
                            <input type="hidden" name="info[enrollTime]" value="" class="enrollPage">
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" name="dosubmit" class="btn btn-primary">咨询报价</button>
                                </div>
                            </div>
                        </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');
        }