<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>新建销售合同</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/fileinput.min.css"> </head> <style> @media (min-width: 1330px) { .container { width: 1300px; } } table td, table th { text-align: center; } .box { /*width: 1524px;*/ overflow: hidden; color: #555; /*margin-left: 50px;*/ } .title { padding: 10px 0 30px; } .newInput { padding: 10px 15px 10px 15px; min-width: 300px; } .newInput label:first-child { min-width: 120px; text-align: right; } .du-btn { text-align: center; margin: 50px 0; } .du-btn a { margin: 0 20px; } .upload { margin-top: 20px; } .upload .form-inline label { min-width: 130px; text-align: right; padding: 10px 0; } .bv-form .help-block { margin-bottom: 0; } .nav-tabs li.bv-tab-success > a { color: #3c763d; } .nav-tabs li.bv-tab-error > a { color: #a94442; } .help-block { text-align: right; } .form-control-feedback { } .form-inline .has-feedback .form-control-feedback { top: 10px; right: 10px; } /*.has-feedback label~.form-control-feedback{*/ /*top:35px;*/ /*}*/ .form-inline .form-group.vali{ height: 62px; } .has-success .form-control { border-color: #ccc; } .glyphicon-ok { display: none; } </style> <body> <div class="box"> <div class="container"> <form action="" id="rightVli" class="rightVli"> <h3 class="title">新建销售合同</h3> <h4 style="padding: 10px 0;" class="list-group-item-danger">车辆销售合同档案编号：<span>XXXXXXXXXX</span></h4> <h4 style="padding: 8px 0;font-size: 16px;margin-top: 15px" class="list-group-item-success">基本信息</h4> <div class="form-inline"> <div class="form-group newInput vali"> <label><span style="color: red">*</span>甲方（卖方）：</label> <input type="text" class="form-control" name="jia"> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>选择门店：</label> <select class="form-control" style="min-width: 221px"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>住所（址）：</label> <input type="text" class="form-control" name="address"> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>联系人：</label> <input type="text" class="form-control" name="people"> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>联系电话：</label> <input type="text" class="form-control" name="phone"> </div> </div> <div class="form-inline"> <div class="form-group newInput vali"> <label><span style="color: red">*</span>乙方（买方）：</label> <input type="text" class="form-control" name="yi"> </div> <div class="form-group newInput vali"> <label>住所（址）：</label> <input type="text" class="form-control" name="address2"> </div> <div class="form-group newInput vali"> <label>公司名称：</label> <input type="text" class="form-control" name="compony"> </div> <div class="form-group newInput vali"> <label>联系电话：</label> <input type="text" class="form-control" name="phone2"> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>身份证号：</label> <input type="text" class="form-control" name="idCard"> </div> <div class="form-group newInput vali"> <label>企业代码：</label> <input type="text" class="form-control" name="idFirm"> </div> </div> <h4 style="padding: 8px 0;font-size: 16px;margin-top: 15px" class="list-group-item-success">车辆信息</h4> <div class="form-inline"> <div class="form-group newInput vali"> <label><span style="color: red">*</span>品牌首字母：</label> <select class="form-control" style="min-width: 221px"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>品牌：</label> <select class="form-control" style="min-width: 221px"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>型号：</label> <select class="form-control" style="min-width: 221px"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group newInput vali"> <label><span style="color: red">*</span>版本：</label> <select class="form-control" style="min-width: 221px"> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group newInput vali"> <label>外观颜色：</label> <input type="text" class="form-control" name="outColor"> </div> <div class="form-group newInput vali"> <label>内饰颜色：</label> <input type="text" class="form-control" name="innerColor"> </div> <div class="form-group newInput vali"> <label>配置：</label> <input type="text" class="form-control" name="config"> </div> <div class="form-group newInput vali"> <label>运费：</label> <input type="text" class="form-control" name="transCost"> </div> <div class="form-group newInput vali"> <label>上牌费：</label> <input type="text" class="form-control" name="cardCost"> </div> <div class="form-group newInput vali"> <label>保险费：</label> <input type="text" class="form-control" placeholder="商业险和交强险" name="premium"> </div> <div class="form-group newInput vali"> <label>购置税：</label> <input type="text" class="form-control" name="buyCost"> </div> <div class="form-group newInput vali"> <label>质保费：</label> <input type="text" class="form-control" name="safeCost"> </div> <div class="form-group newInput vali"> <label>延保费：</label> <input type="text" class="form-control" name="extendCost"> </div> <div class="form-group newInput vali"> <label>装潢费：</label> <input type="text" class="form-control" name="dreCost"> </div> </div> <div class="form-inline"> <div class="form-group newInput vali"> <label><span style="color: red">*</span>车辆销售价格：</label> <input type="text" class="form-control" placeholder="合伙人录入结算价" name="endCost"> </div> <div class="form-group newInput vali"> <label>定金金额：</label> <input type="text" class="form-control" name="preMoney"> </div> </div> <div class="form-inline"> <div class="form-group newInput vali du-choose-category"> <label>金融购车：</label> <label class="radio-inline" style="margin-right: 20px"> <input type="radio" name="buy" id="inlineRadio1" value="1" checked> 是 </label> <label class="radio-inline"> <input type="radio" name="buy" id="inlineRadio2" value="2"> 否 </label> </div> </div> </form> <form enctype="multipart/form-data" class="upload"> <label style="color: red;margin-left: 30px">只能上传后缀为jpg,png,gif的图片</label> <div class="form-inline"> <label>上传车辆销售合同：</label> <div class="form-group"> <input id="file-01" class="file-loading" type="file" multiple> </div> </div> <div class="form-inline"> <label>上传报价单：</label> <div class="form-group"> <input id="file-02" class="file-loading" type="file"> </div> </div> <div class="form-inline"> <label>上传定金POS单：</label> <div class="form-group"> <input id="file-03" class="file-loading" type="file"> </div> </div> </form> <div class="form-inline" style="margin-top: 20px"> <div class="form-group newInput vali" style="height: auto"> <label>合同补充信息：</label> <textarea class="form-control" rows="5" style="resize: none;min-width:500px " id="du-reason"></textarea> </div> </div> <div class="du-btn"> <a href="javascript:;" class="btn btn-danger submit" role="button">合同提交审核 </a> <a href="javascript:;" class="btn btn-warning" role="button" style="padding: 6px 30px"> 取消 </a> </div> </div> <!--</form>--> </div> </body> <script src="js/jquery-2.1.4.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/fileinput.min.js"></script> <script src="js/bootstrapValidator.min.js"></script> <script src="js/zh.js"></script> <script> $(function () { initFileInput("file-01"); initFileInput("file-02"); initFileInput("file-03"); }); function initFileInput(ctrlName) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //设置语言 uploadUrl: "aa.php", //上传的地址 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 // maxFilesNum: 5,//上传最大的文件数量 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 showRemove: true, //显示移除按钮 showPreview: true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, // maxFileCount: 3, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount: true, previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", layoutTemplates: { actionUpload: "" //去掉单独上传按钮 } }).on('filepreupload', function (event, data, previewId, index) { //上传中 var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader; console.log('文件正在上传'); }).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功 alert(1) console.log('文件上传成功！' + data.id); }).on('fileerror', function (event, data, msg) { //一个文件上传失败 alert(2) console.log('文件上传失败！' + data.id); }) } $(".submit").click(function () { $("#rightVli").submit(); }) $("#rightVli").bootstrapValidator({ ive: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证 excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的 submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面 message: '通用的验证失败消息',//好像从来没出现过 feedbackIcons: {//根据验证结果显示的各种图标 valid: 'glyphicon', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { jia: { message: '用户名验证失败', validators: { notEmpty: { message: '甲方不能为空' }, stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, address: { message: '住址验证失败', validators: { notEmpty: { message: '住址不能为空' }, stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, people: { message: '联系人验证失败', validators: { notEmpty: { message: '联系人不能为空' }, stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, phone: { validators: { notEmpty: { message: '手机号不能为空' }, regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, yi: { validators: { notEmpty: { message: '乙方不能为空' }, stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, address2: { validators: { stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, compony: { validators: { stringLength: { max: 255, message: '长度必须在小于255位字符' } } }, phone2: { validators: { regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, idCard: { validators: { notEmpty: { message: '身份证不能为空' }, regexp: { regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式填写错误' } } }, idFirm: { validators: { regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, outColor: { validators: { regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, innerColor: { validators: { regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, config: { validators: { regexp: { regexp: /^1[34578]\d{9}$/, message: '手机号码验证错误' } } }, transCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, cardCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, premium: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, buyCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, safeCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, extendCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, dreCost: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, endCost: { validators: { notEmpty: { message: '车辆销售价格不能为空' }, stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } }, preMoney: { validators: { stringLength: { max: 20, message: '金额超过最大限额' }, regexp: { regexp: /((^[1-9](\d+)?(\.\d{1,2})?$)|(^(0){1}$)|(^\d\.\d{1,2}?$))/, message: '金额格式填写错误' } } } } }); </script> </html>
bootstrapValidator验证表单实例
猜你喜欢
转载自blog.csdn.net/ddwddw4/article/details/80097672
今日推荐
周排行