bootstrap表单基本结构代码

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

<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');
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
包括源代码、数据库文档、数据库创建SQL脚本。一套基于ASP.NET MVC+EF6+Bootstrap开发出来的框架源代码! 采用主流框架,容易上手,简单易学,学习成本低。可完全实现二次开发、基本满足80%项目需求。 可以帮助解决.NET项目70%的重复工作,让开发更多关注业务逻辑。既能快速提高开发效率,帮助公司节省人力成本,同时又不失灵活性。 支持SQLServer、MySQL、Oracle、SQLite、Access 等多数据库类型。模块化设计,层次结构清晰。内置一系列企业信息管理的基础功能。 操作权限控制精密细致,对所有管理链接都进行权限验证,可控制到导航菜单、功能按钮。 数据权限(精细化数据权限控制,控制到行级,列表级,表单字段级,实现不同人看不同数据,不同人对同一个页面操作不同字段 兼容目前最流行浏览器(IE8+、Chrome、Firefox、360浏览器) 1、前端技术 JS框架:Bootstrap、JQuery CSS框架:Bootstrap v3.3.4(稳定是后台,UI方面根据需求自己升级改造吧)。 客户端验证:jQuery Validation Plugin。 在线编辑器:ckeditor、simditor 上传文件:Uploadify 数据表格:jqGrid、Bootstrap Talbe 对话框:layer 页面布局:jquery.layout.js 图表插件:echarts、highcharts 2、后端技术 核心框架:ASP.NET MVC5、WEB API 持久层框架:EntityFramework 定时计划任务:Quartz.Net组件 安全支持:过滤器、Sql注入、请求伪造 服务端验证:实体模型验证、自己封装Validator 缓存框架:微软自带Cache、Redis 日志管理:Log4net、登录日志、操作日志 工具类:NPOI、Newtonsoft.Json、验证码

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值