一、动态添加表格
一、動態添加表格
@{Layout = null; }<!DOCTYPE html> <html><head><title>大數據在線評估</title><!-- Bootstrap CSS --><link rel="stylesheet" href="/doseen/static/themes/global/css/bootstrap.css"><!-- Site CSS --><link rel="stylesheet" href="/doseen/static/themes/base/css/site.css" id="admui-siteStyle"><!-- 圖標 CSS--><link rel="stylesheet" href="/doseen/static/fonts/font-awesome/font-awesome.css"><link rel="stylesheet" href="/doseen/static/fonts/web-icons/web-icons.css"><!-- Vendor JS --><script src="/doseen/static/vendor/jquery/jquery.min.js"></script><script src="/doseen/static/vendor/bootstrap/bootstrap.bundle.min.js"></script><script src="/doseen/static/vendor/lodash/lodash.min.js"></script><script src="/doseen/static/vendor/vue/vue.min.js"></script></head><body class="site-contabs-open site-menubar-unfold "><div class="page animation-fade page-forms"><div class="page-content" id="app"><form><div class="panel"><header class="panel-heading"><h3 class="panel-title">主借人</h3></header><div class="panel-body container-fluid"><div class="form-group"><label class=" col-form-label">姓名：</label><input type="text" class="form-control" v-model="formData.right.name" placeholder="姓名"autocomplete="off"></div><div class="form-group"><label class="col-form-label">手機號：</label><input type="text" oninput="value=value.replace(/[^\d]/g,'')" class="form-control" v-model="formData.right.tel" placeholder="手機號"autocomplete="off"></div><div class="form-group"><label class=" col-form-label">身份證號：</label><input type="text" class="form-control" v-model="formData.right.codeId" placeholder="身份證號"autocomplete="off"></div></div></div><!-- panel end --><div class=" panel" v-for="(item,index) in formData.left"><header class="panel-heading"><h3 class="panel-title"><span style="padding-right: 10px">共借人{{index+1}}</span><button type="button" class="btn btn-danger btn-outline btn-sm" :data-index="index"v-on:click="delLeft">刪除共借人{{index+1}}</button></h3></header><div class="panel-body container-fluid"><div class="form-group"><label class=" col-form-label">姓名：</label><input type="text" class="form-control" :value="item.name" name="name"v-on:input="handleInput($event,index)" placeholder="姓名" autocomplete="off"></div><div class="form-group"><label class="col-form-label">手機號：</label><input type="text" class="form-control" :value="item.tel" name="tel"v-on:input="handleInput($event,index)" placeholder="手機號" autocomplete="off"></div><div class="form-group"><label class=" col-form-label">身份證號：</label><input type="text" class="form-control" :value="item.codeId" name="codeId"v-on:input="handleInput($event,index)" placeholder="身份證號" autocomplete="off"></div></div></div><!-- panel end --><div class="panel"><div class="panel-body container-fluid"><div class="form-group "><button type="button" class="btn btn-primary btn-lg" v-on:click="saveForm">提交 </button><button type="button" class="btn btn-warning" v-on:click="addLeft"v-show="leftLength<4 ">添加一個共借人</button></div></div></div></form></div></div><!-- common js --><script src="/doseen/static/themes/base/js/app.js"></script><script src="/doseen/static/vendor/matchheight/jquery.matchHeight.min.js"></script><script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/layer/2.3/skin/layer.css"><script>var app = new Vue({el: '#app',data: {defaultData: {name: '',tel: '',codeId: '',},leftLength: 0,formData: {right: {name: '',tel: '',codeId: '',},left: []}},methods: {arraySetName: function (name, value, i) {var arrayData = JSON.parse(JSON.stringify(this.formData.left));if (name == 'name') {arrayData[i]['name'] = value;}if (name == 'tel') {arrayData[i]['tel'] = value;}if (name == 'codeId') {arrayData[i]['codeId'] = value;}this.formData.left = arrayData;},handleInput: function (e, i) {var name = e.target.name;var value = e.target.value;this.arraySetName(name, value, i);},addLeft: function () {if (this.leftLength < 4) {this.formData.left.push(this.defaultData);this.leftLength += 1;}},delLeft: function (e) {var index = e.currentTarget.dataset.index;this.formData.left.splice(index, 1);this.leftLength -= 1;},saveForm: function () {//ajax提交this.formDatavar u = "/CreditEval/GetRiskEval";if (!this.formData.right["name"]) {layer.msg('主借人姓名不能為空', { time: 2000, icon: 5 });return ;}if (!this.formData.right["tel"]) {layer.msg('主借人手機號不能為空', { time: 2000, icon: 5 });return ;}if (!verif.IsTel(this.formData.right["tel"])) {layer.msg('主借人手機號格式有誤!:' + this.formData.right["tel"], { time: 2000, icon: 0 });return ;}if (!this.formData.right["codeId"]) {layer.msg('主借人身份證號不能為空', { time: 2000, icon: 5 });return ;}if (!verif.IsCard(this.formData.right["codeId"])) {layer.msg('主借人身份證號格式有誤!:' + this.formData.right["codeId"], { time: 2000, icon: 0 });return ;}var self = this;if (this.formData.left.length != 0) {var data = this.formData.left;$.each(data, function (index, val) {if (!val["name"]) {layer.msg('共借人姓名不能為空', { time: 2000, icon: 5 });return ;}if (!verif.IsTel(val["tel"])) {layer.msg('手機號格式有誤!:' + val["tel"], { time: 2000, icon: 0 });return ;}if (!verif.IsCard(val["codeId"])) {layer.msg('身份證號格式有誤!:' + val["codeId"], { time: 2000, icon: 0 });return ;}if (self.formData.right["tel"] == val["tel"]) {layer.msg('不能與主借人手機號碼相同!:' + val["tel"], { time: 2000, icon: 0 });return ;}if (self.formData.right["codeId"] == val["codeId"]) {layer.msg('不能與主借人身份證號相同!:' + val["codeId"], { time: 2000, icon: 0 });return ;}//去重復for (var i = index + 1; i < data; i++) {if (val["tel"] == data[i]["tel"]) {layer.msg('共借人手號碼重復!:' + data[i]["tel"], { time: 2000, icon: 0 });return ;}if (val["codeId"] == data[i]["codeId"]) {layer.msg('共借人身份證號碼重復!:' + data[i]["codeId"], { time: 2000, icon: 0 });return ;}}});}$.ajax({url: u,method: 'post',dataType: 'json',data:{"data": JSON.stringify(this.formData),'cityCode':0},success: function (data) {if (data["Code"] == "200") {//console.log("data:" + JSON.stringify(data));//頁面層-自定義var res = JSON.parse(data["Result"]); //測試寫法//var res =JSON.parse(data["result"]); //寫法//console.log("res:" + res);//var str = '分數:' + data["result"]["final_score"] + '<br />反欺詐得分:' + data["result"]["totalprice"];var url = '/CreditEval/GetBigDataDetail?SequenceId=' + res["Seq_id"];//console.log("url:" + url); $.site.contentTabs.reloadTab('/CreditEval/Index');$.site.contentTabs.buildTab({name: '評估記錄',url: url});} else {//console.log(JSON.stringify(data));var str = '錯誤碼:' + data["Code"] + '<br />錯誤提示:' + data["Message"];layer.alert(str, {//skin: 'layui-layer-lan' //樣式類名 title: "評估結果", closeBtn: 0, anim: 4 //動畫類型 , icon: 2});}//alert(JSON.stringify(data));//console.log(JSON.stringify(data)); }, error: function (err) {layer.alert(err, {//skin: 'layui-layer-lan' //樣式類名 title: "請求異常", closeBtn: 0, anim: 4 //動畫類型 , icon: 2});//console.log(JSON.stringify(err)); }});},}});var verif = {IsTel: function (str) {var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;if (!myreg.test(str)) {return false;} else {return true;}},IsCard: function (card) {var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;return pattern.test(card);}};</script></body></html>
?
轉載于:https://www.cnblogs.com/fger/p/11276766.html
總結
