form · vue · 看云

[TOC] ## 校驗 trigger: 'change' 注意觸發事件 ### 校驗數字型 > v-model.numbe 這樣寫 ~~~ <el-form-item label="有效期" style="margin-right: 10px;" prop="days"> <el-input v-model.number="vcaInstance.days" placeholder="" size="small"></el-input> </el-form-item> rules: { days: [ {required: true, message: '請輸入有效期天數',trigger: 'blur'}, {type: 'number', message: '有效期天數為數字值',trigger: 'blur'}, {type: 'number',min: 366, message: '證書有效期最少366天', trigger: 'blur' } ], }, ~~~ ### 正則校驗 ~~~ idCard: [ {required:true, type:'string',message:'請輸入身份證號',}, { pattern:/(^\d{14}([0-9 Xx]$))|(^\d{17}([0-9 Xx]$))/,message:'請輸入15或18位的有效身份證號' ,trigger:'blur'}, ], ~~~ ### 完整 ~~~ <template> <el-alert type="error" show-icon v-if="message">加載信息失敗：{{ message }}</el-alert> <el-container class="container" v-else>  <el-main class="main"> <p class="title_p">簽發下級</p> <el-form :model="form" ref="inferiorForm" :inline="true" label-position="left" class="demo-form-inline" label-width="80px" :rules="rules"> <el-form-item label="證書模板" style="margin-right: 10px;" prop="certCtmlId"> <el-select v-model="form.certCtmlId" placeholder="請選擇證書模板" size="small"> <el-option v-for="item in teamplates" :key="item.certCtmlId" :label="item.ctmlName" :value="item.certCtmlId"> </el-option> </el-select> </el-form-item> <el-form-item label="模板描述" prop="ctmlDesc" label-width="100px"> <el-input v-model="form.ctmlDesc" placeholder="" size="small" :disabled="true"></el-input> </el-form-item> <el-form-item label="申請書" prop="fileName" style="display: block;height: 30px;line-height: 30px;"> <input type="file" @change="fileChange($event)" style="display:none" ref="uploadFile" accept=".req" /> <el-input size="small" v-model="form.fileName" placeholder="請選文件" disabled style="width: 510px;" class="inputfile"> <el-button slot="append" @click="selectFile">選擇文件</el-button> <el-button slot="append" @click="seeReqFile">查看文件</el-button> </el-input> </el-form-item> <el-form-item label="起始時間" prop="startTime"> <el-date-picker type="datetime" placeholder="選擇起始時間" value-format="yyyy.MM.dd HH:mm:ss" v-model="form.startTime" style="width: 200px;" size="small" ></el-date-picker> </el-form-item> <el-form-item label="結束時間" label-width="100px" prop="endTime"> <el-date-picker type="datetime" placeholder="選擇結束時間" v-model="form.endTime" size="small" style="width: 200px;" value-format="yyyy.MM.dd HH:mm:ss"></el-date-picker> </el-form-item> </el-form> <el-row style="margin-top: 10px;"> <el-button type="primary" plain size="mini" @click="sign">簽發</el-button> <el-button size="mini" @click="$emit('cancel')">取消</el-button> </el-row> </el-main> </el-container> </template> <script> import {createNamespacedHelpers} from 'vuex'; const {mapState, mapActions, mapMutations} = createNamespacedHelpers('system/vca'); export default { name: 'vca-pane', components: {}, props: { userId: String, teamplates: Array, }, data() { return { //抽屜控制 loading: true, message: null, data: {}, form: { certCtmlId: '', //模板id ctmlName: '',//模板名稱 ctmlDesc: '', //模板描述 startTime: '',//證書開始生效時間格式：“yyyy.MM.dd”+“空格”+“hh:mm:ss” endTime: '',//證書失效時間 file: null, // 申請書文件 fileName: null, //申請書文件名 }, rules: { certCtmlId: [ {required: true, message: '請選擇模板', trigger: 'change'}, ], ctmlName: [ {required: true, message: '模板名稱不能為空', trigger: 'change'}, ], ctmlDesc: [ {required: true, message: '模板描述不能為空', trigger: 'change'}, ], startTime: [ {required: true, message: '請選擇證書起始時間', trigger: 'change'}, ], endTime: [ {required: true, message: '請選擇證書失效時間', trigger: 'change'}, ], fileName: [ {required: true, message: '請上傳申請書文件', trigger: 'change'}, ], }, }; }, computed: { ...mapState(['current']), isEdit() { console.log(this.data, '---'); return Boolean(this.data && this.data.userId); }, }, async mounted() { //加載模板 this.$emit('queryteamplate'); }, methods: { ...mapActions(['create', 'update', 'fetch']), sign() { this.$refs['inferiorForm'].validate((valid) => { if (valid) { this.$emit('signVca', this.form); } else { console.log('error submit!!'); return false; } }); }, selectFile() { this.$refs.uploadFile.value = ''; this.$refs.uploadFile.click(); }, //查看文件 seeReqFile() { console.log('查看文件'); }, fileChange(event) { console.log("文件變了"); this.form.file = this.$refs['uploadFile'].files[0]; this.form.fileName = this.form.file.name; //this.$emit('signVca', this.form); }, }, watch: { 'form.certCtmlId': function (newTeamplateId) { //監控模板下拉選值變化 console.log("模板改變了。。。。。" + this.teamplates); for (let index in this.teamplates) { if (this.teamplates[index].certCtmlId == newTeamplateId) { this.form.ctmlDesc = this.teamplates[index].ctmlDesc; //改變模板描述 this.form.ctmlName = this.teamplates[index].ctmlName; //改變模板描述 this.form.startTime = this.teamplates[index].startTime; //改變證書起始時間 this.form.endTime = this.teamplates[index].endTime; //改變證書結束時間 } } }, }, }; </script> <style lang="less" scoped> /dppe/ .el-form-item__label { padding: 0 0 0 0 !important; } .title_p { font-size: 17px; margin-bottom: 10px; margin-left: -10px; font-weight: bold; } /deep/ .el-form-item__content { width: 200px; } /* .el-form .el-form-item:nth-child(odd){margin-right: 30px !important;} */ .el-main { padding-top: 0px; } .el-button + .el-button { margin-left: 27px; } .two { padding: 7px 25px; } .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } .inputfile .el-input__inner { width: 100%; } </style> ~~~