热门标签
热门文章
- 1centos7下的光驱挂载_dependency failed for mark the need to relabel aft
- 2Arcmap制作栅格掩膜_arcmap掩膜
- 3spring boot 集成pagehelper
- 4unity3D技术之WaitForEndOfFrame 等待帧结束_unity waitforendofframe
- 5什么是深度学习？_什么是深度学习csdn
- 6【微信小程序/实现】wx:for实现数组循环插入数据，显示到页面中_微信小程序 列表wx:for
- 7计算机网络原理之数据链路层详解_(1)数据链路层帧转化为网络层ip报文 (2)ip报文解析出源和目的地址,提取传输层段数
- 8【Spring】四种依赖注入方式（xml、注解）_spring中依赖注入的四种方式
- 9web网页大作业——基于HTML+CSS+JavaScript制作摄影之家网站
- 10C#字典Dictionary排序（顺序、倒序）笔记_c# dictionary orderby
当前位置: article > 正文
vue 项目antDesign动态表单添加校验案例_a-select校验
作者：从前慢现在也慢 | 2024-02-16 06:43:34
赞
踩
a-select校验
vue 项目antDesign动态表单添加校验
如下图所示
1，在表单页面中，a-form-model-item 标签可嵌套
2，使用prop传值时使用form表单定义的字段
主要代码如下
<div class="form_area" v-for="(item, index) in form.domains" :key="index"> <a-form-model-item style="display: inline-block;text-align: left;margin: 0px" :prop="'domains.' + index + '.majorName'" :rules="{ required: true, message: '请输入专业名称', trigger: 'blur', }"> <a-select show-search :value="item.majorName" placeholder="专业名称" class="sp-width" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" label-in-value @search="handleSearch" @focus="handleFocus(index)" @blur="onBlurSelect" @change="handleChange" > <a-select-option v-for="obj in item.majorNameArr" :key="obj.specialtyCode"> {{ obj.specialtyName }} </a-select-option> </a-select> </a-form-model-item> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.majorCode'" :rules="{ required: true, message: '请输入代码', trigger: 'blur', }"> <a-input class="m-width" placeholder="专业代码" v-model="item.majorCode" @blur="blurInput(item.majorCode)" /> </a-form-model-item> <!--<a-input class="m-width" placeholder="学历" @change="handleXueLiChange" v-model="item.education" /> --> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.education'" :rules="{ required: true, message: '请选择学历', trigger: 'change', }"> <a-select v-model ='item.education' style="width: 90px;margin-left: 16px" > <a-select-option v-for="(xuli,index) in xueLiOptions" :key="xuli" > {{xuli}} </a-select-option> </a-select> </a-form-model-item> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.studentNumber'" :rules="{ required: true, message: '请输入人数', trigger: 'blur', }"> <a-input class="m-width" placeholder="人数" v-model="item.studentNumber" /> </a-form-model-item> <!-- <a-input class="m-width" placeholder="人数" v-model="item.studentNumber" />--> <template v-if="!isDisabled"> <div style="display: inline-block" v-if="index === 0" > <a-icon class="create_fq_icon m-left" v-if="option =='add'" @click="addField" type="plus-circle" /> <span class="see-code" @click="seeMajorCodeFun">查看专业代码</span> </div> <a-icon v-else class="create_fq_icon m-left" @click="deleteField(index)" type="minus-circle" /> </template> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
全部代码：
<template> <div class="add-mem"> <div class="form-css"> <a-form-model :model="form" :rules="rules" ref="ruleForm" :wrapper-col="{ span: 10 }" :label-col="{ span: 5 }"> <a-form-model-item label="院系名称" prop="departmentName"> <a-input class="form_width" v-model="form.departmentName" /> <!-- class="form_width" --> </a-form-model-item> <a-form-model-item label="届别" prop="grade"> <a-input class="form_width" v-model="form.grade" placeholder="请输入届别，4位年份数字，如2021" /> </a-form-model-item> <a-form-model-item label="专业" style="margin-bottom: 0px " required> <!-- <div class="form_area" v-for="(item, index) in majorArr" :key="index">--> <div class="form_area" v-for="(item, index) in form.domains" :key="index"> <a-form-model-item style="display: inline-block;text-align: left;margin: 0px" :prop="'domains.' + index + '.majorName'" :rules="{ required: true, message: '请输入专业名称', trigger: 'blur', }"> <a-select show-search :value="item.majorName" placeholder="专业名称" class="sp-width" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" label-in-value @search="handleSearch" @focus="handleFocus(index)" @blur="onBlurSelect" @change="handleChange" > <a-select-option v-for="obj in item.majorNameArr" :key="obj.specialtyCode"> {{ obj.specialtyName }} </a-select-option> </a-select> </a-form-model-item> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.majorCode'" :rules="{ required: true, message: '请输入代码', trigger: 'blur', }"> <a-input class="m-width" placeholder="专业代码" v-model="item.majorCode" @blur="blurInput(item.majorCode)" /> </a-form-model-item> <!--<a-input class="m-width" placeholder="学历" @change="handleXueLiChange" v-model="item.education" /> --> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.education'" :rules="{ required: true, message: '请选择学历', trigger: 'change', }"> <a-select v-model ='item.education' style="width: 90px;margin-left: 16px" > <a-select-option v-for="(xuli,index) in xueLiOptions" :key="xuli" > {{xuli}} </a-select-option> </a-select> </a-form-model-item> <a-form-model-item style="display: inline-block;text-align: center;margin: 0px" :prop="'domains.' + index + '.studentNumber'" :rules="{ required: true, message: '请输入人数', trigger: 'blur', }"> <a-input class="m-width" placeholder="人数" v-model="item.studentNumber" /> </a-form-model-item> <!-- <a-input class="m-width" placeholder="人数" v-model="item.studentNumber" />--> <template v-if="!isDisabled"> <div style="display: inline-block" v-if="index === 0" > <a-icon class="create_fq_icon m-left" v-if="option =='add'" @click="addField" type="plus-circle" /> <span class="see-code" @click="seeMajorCodeFun">查看专业代码</span> </div> <a-icon v-else class="create_fq_icon m-left" @click="deleteField(index)" type="minus-circle" /> </template> </div> </a-form-model-item> <a-form-model-item label="联系人"> <a-input class="form_width" v-model="form.linkMan" /> </a-form-model-item> <a-form-model-item label="联系电话"> <a-input class="form_width" v-model="form.linkPhone" /> </a-form-model-item> <a-form-model-item label="院系地址"> <a-input class="form_width" v-model="form.address" /> </a-form-model-item> <a-form-model-item label="备注："> <a-input class="form_width self_max" type="textarea" v-model="form.comment" /> </a-form-model-item> <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }" style="margin-left: 5%"> <a-button v-if="option=='add'" type="primary" @click="onSubmit"> 提交 </a-button> <a-button v-else type="primary" @click="updateMajorInfo"> 修改 </a-button> <a-button style="margin-left: 10px;" @click="doCancel"> 取消 </a-button> </a-form-model-item> </a-form-model> </div> <a-modal v-model="seeMajorFlag" class="self-dialog" centered width="880" :bodyStyle="{padding:'0',borderRadius:'0'}" :footer="null" @ok="() => (seeMajorFlag = false)" > <three-class-comp ref="threeDialog" :jobClassList="seeMajorArr" :threeMajorList="threeMajorList" ></three-class-comp> <!-- :form="formMajor" @sureMajorMethod="sureMajorMethod" --> </a-modal> </div> </template> <script> let timeout; let currentValue; // import { doSearchMajorList ,doAddMajorForm,doGetMajorRow,doUpdateMajorRow,doGetSpecialties} from '@/http/api.js' function fetch(value, callback) { if (timeout) { clearTimeout(timeout); timeout = null; } currentValue = value; function fake() { let param = { name : value} doSearchMajorList(param).then(res =>{ if (currentValue === value) { const result = res.data.data || []; callback(result); } }) } timeout = setTimeout(fake, 300); } import { mapGetters} from 'vuex' import ThreeClassComp from "./compontents/ThreeClassComp"; export default { name: 'MajorAddPage', components: { ThreeClassComp }, data() { let checkGrade = (rule, value, callback) => { let structRight = RegExp(/^[0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3}$/).test(value); if (!structRight) { callback(new Error('请输入正确的届别')); } else { callback(); } }; return { seeMajorFlag:false, isDisabled: false, labelCol: {span: 4}, wrapperCol: {span: 14}, majorArr: [{majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]}], majorNameArr: [], majorCodeArr: [], value: undefined, majorCode:undefined, selIndex:'', form: { address: '', comment: '', departmentName: '', education: '', grade: '', linkMan: '', linkPhone: '', majorCode: '', majorName: undefined, schoolCode: '', status: false, studentNumber: '', domains: [{majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[],value:''}], }, majorId:'', xueLiOptions:[], option:'', seeMajorArr: [], threeMajorList: [], rules: { departmentName: [{required: true, message: '请输入院系名称', trigger: 'blur'}, {max: 30, message: '最多输入30个字符', trigger: 'blur'}, ], grade: [{required: true, message: '请输入届别', trigger: 'blur'}, { validator: checkGrade, trigger: 'blur' } ], roles: [{required: true, message: '请输入所属角色', trigger: 'change'}], }, }; }, computed:{ ...mapGetters('login', [ 'userInfo' ]), }, created() { this.xueLiOptions = this.$store.getters.xueLiOptions this.majorId = this.$route.params.id; if (this.majorId){ // 修改 edit this.option = 'edit' this.getMajorDetailById(); } else { // 新增 this.option = 'add' } this.seeMajorList(); }, methods: { getMajorDetailById () { let params = {id:this.majorId} doGetMajorRow(params).then(res =>{ if (res.data.code == 0) { // console.log("237==",JSON.parse(JSON.stringify(res.data.major))) let cObj = JSON.parse(JSON.stringify(res.data.major)) // this.form = JSON.parse(JSON.stringify(res.data.major)); // this.form.domains = [{majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[],value:''}] this.form.majorName = cObj.majorName this.form.departmentName = cObj.departmentName this.form.grade = cObj.grade this.form.enable = cObj.enable this.form.education = cObj.education this.form.facultyId = cObj.facultyId this.form.id = cObj.id this.form.linkMan = cObj.linkMan this.form.linkPhone = cObj.linkPhone this.form.majorCode = cObj.majorCode this.form.majorName = cObj.majorName this.form.studentNumber = cObj.studentNumber this.form.domains[0].majorCode = this.form.majorCode // this.majorArr[0].majorName = this.form.majorName this.form.domains[0].majorName ={key: "", label: this.form.majorName } this.form.domains[0].education = this.form.education this.form.domains[0].studentNumber = this.form.studentNumber } }) }, onSubmit() { let self = this self.$refs.ruleForm.validate(valid => { console.log("valid=225=",valid); let copyMajorArr = JSON.parse(JSON.stringify(self.form.domains)); if (copyMajorArr && copyMajorArr.length >0) { copyMajorArr.forEach(item =>{ if (item.majorName){ item.majorName = item.majorName.label item.majorNameArr = [] } }) } if (valid) { if (!copyMajorArr[0].majorName){ this.$message.error("请输入专业信息"); return } self.form.schoolCode = self.userInfo.schoolCode self.form.majorList = copyMajorArr; doAddMajorForm(self.form).then(res =>{ if (res.data.code == 0){ if (res.data.list.length == 0){ self.$message.success('添加院系专业成功！') self.$router.push('/majorSet') } else{ let nameStr = '' let hadList = res.data.list[0].majorList hadList.forEach(item =>{ if(nameStr){ nameStr = nameStr + '、' + item.majorName }else{ nameStr = item.majorName } }) self.$message.error(`您添加的院系专业${nameStr}未成功添加`) //self.$router.push('/majorSet') } } }) } else { } }) }, // 修该 updateMajorInfo(){ let copyMajorArr = JSON.parse(JSON.stringify(this.form.domains)); if(copyMajorArr && copyMajorArr.length >0){ copyMajorArr.forEach(item =>{ item.majorName = item.majorName.label }) } let self = this self.$refs.ruleForm.validate(valid => { if (valid) { self.form.schoolCode = self.userInfo.schoolCode self.form.majorList = copyMajorArr; self.form.majorName = self.form.majorList[0].majorName self.form.majorCode = self.form.majorList[0].majorCode self.form.education = self.form.majorList[0].education self.form.studentNumber = self.form.majorList[0].studentNumber doUpdateMajorRow(self.form).then(res =>{ if(res.data.code == 0){ self.$message.success('修改院系专业成功！') self.$router.push('/majorSet') } }) } else { } }) }, blurInput (val) { if (val){ let structRight = RegExp(/^[a-zA-Z,0-9]{1,7}$/).test(val); // 校验 console.log("structRight==277==",structRight); if (!structRight){ this.$message.error("专业代码填写不正确！") } } }, seeMajorCodeFun () { this.seeMajorFlag = true; }, doCancel() { this.$router.go(-1); }, addField() { if (this.form.domains.length<20){ // this.majorArr.push({majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]}) this.form.domains.push({majorName: undefined, majorCode: null,education:'',studentNumber:'',majorNameArr:[]}) }else { this.$message.info('最多添加20个专业！') } }, deleteField(index) { //this.majorArr.splice(index, 1) this.form.domains.splice(index, 1) }, handleSearch(value) { if (value) { // this.majorArr[this.selIndex].inputName = value // 输入的名称复制给inputName this.form.domains[this.selIndex].inputName = value // 输入的名称复制给inputName // fetch(value, data => (this.majorNameArr = data)); fetch(value, data => (this.form.domains[this.selIndex].majorNameArr = data)); } }, handleChange(value) { // this.value = value; // this.form.majorName = value; this.form.domains[this.selIndex].majorName = value this.form.domains[this.selIndex].majorCode = value.key // fetch(value, data => (this.majorNameArr = data)); }, onBlurSelect(value) { if (this.form.domains[this.selIndex].majorNameArr.length>0) { } else { if (this.form.domains[this.selIndex].inputName && this.majorArr[this.selIndex].inputName.length >0){ this.form.domains[this.selIndex].majorName = {key: "", label: this.majorArr[this.selIndex].inputName } } } }, handleFocus(val){//传的索引值 this.selIndex = val }, //获取专业列表 seeMajorList (){ doGetSpecialties().then((res) => { this.seeMajorArr = res.data.data || []; // 专业总共有三级,可优化成 内循环 this.seeMajorArr.forEach((oneObj) => { let twoClassList = oneObj.class || []; if (twoClassList && twoClassList.length > 0) { twoClassList.forEach((twoObj) => { twoObj.parentId = oneObj.disciplineCode; let threeClassList = twoObj.specialties; if (threeClassList && threeClassList.length > 0) { threeClassList.forEach((threeObj) => { threeObj.parentId = twoObj.classCode; threeObj.grandFatherId = oneObj.disciplineCode; this.threeMajorList.push(threeObj); }); } }); } }); }); } }, } </script> <style scoped lang="less"> .add-mem{ background-color: #FFFFFF; /*width: 1136px;*/ min-height: 630px; padding-top: 30px; padding-bottom: 50px; .form-css{ .form_width { width: 514px; &.field { width: 217px; } } .self_max{ max-width: none; } .sp-width{ width: 200px; } .m-width{ width: 88px; margin-left: 16px; } .see-code{ color: rgba(0, 0, 0, 0.45); font-size: 14px; margin-left: 20px; cursor: pointer; &:hover{ color: #437FFF; } } .form_area{ width: 668px; height: 60px; /*margin-bottom: 16px;*/ /*border: 1px solid red;*/ .m-left{ margin-left: 16px; } } .create_fq_icon { font-size: 18px; vertical-align: middle; color: #437FFF; } .from-index{ display: inline-block; margin-right: 10px; } } } </style> <style> /*.self-dialog .ant-modal-content { border-radius: 2px; }*/ </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
- 相关标签
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
