[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>
<!-- v-loading="loading" -->
<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>
~~~
- vue
- 为什么要学vue
- 数据双向绑定
- vue指令
- v-bind创建HTML节点属性
- v-on绑定事件
- v-cloak
- v-text
- v-for和key属性
- v-if和v-show
- 案例1
- 自定义指令
- vue样式
- vue生命周期
- vue过滤器
- 自定义键盘修饰符
- 跨域请求
- vue组件
- 组件基础
- 引入vue文件组件
- 引入render函数作为组件
- 兄弟间组件通信
- 组件函数数据传递练习
- 路由
- 数据监听
- webpack
- vue校验
- vue笔记
- form表单中input前部分默认输入，切不可修改
- mixins
- 部署到nginx
- scope
- render
- 下载文件
- vue动态组件
- axios
- Promise
- vue进阶
- node-vue-webpack搭建
- vue事件
- 插槽
- vuex
- vuex基础
- vuex命名空间
- HTML递归？
- this.$nextTick异步更新dom
- elementui
- table
- 修改element ui样式
- form
- 优质博客
- vuex state数据与form元素绑定
- es6
- Promise