<el-dialog :title="moduleDialogName" :visible.sync="moduleDialog" :modal-append-to-body="false" center width="30%" >
<el-form :model="moduleForm" label-width="160px" :rules="moduleFormRule" ref="moduleFormRuleRef">
<el-form-item label="父模块" prop="project">
<el-input v-model="moduleForm.parentModule" placeholder="请输入内容" style="width: 70%;" readonly="readonly">el-input>
el-form-item>
<el-form-item label="模块(小写英文)" prop="module">
<el-input style="width: 70%;" v-model="moduleForm.module" minlength="1" >
el-input>
el-form-item>
<el-form-item label="默认端口" prop="port">
<el-input style="width: 70%;" v-model="moduleForm.port" minlength="1" >
el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" id="signs2" type="primary" @click="dealModuleData()" >提 交el-button>
<el-button size="mini" @click="moduleDialog = false">关闭el-button>
div>
el-dialog>
data() {
var checkModuleName = (rule, value, callback) => {
if (!value) {
return callback(new Error('请输入模块名'))
}
let pattern = new RegExp('[a-z]')
if (!pattern.test(value)) {
return callback(new Error('请输入小写英文字母'))
}
callback()
}
return {
moduleFormRule: {
module: [
{ required: true, trigger: 'blur', validator: checkModuleName }
]
}
}
}
最后在方法里加上校验:
self.$refs['moduleFormRuleRef'].validate(valid => {
if (valid) {
commData.addModuleName(param).then(data => {
if (data.success) {
this.moduleDialog = false
// self.getModuleData(1, self.pageSize)
if (self.projectObj) {
self.getModuleTreeData()
}
self.$message({ message: '添加成功', type: 'success' })
} else {
self.$message.error(data.msg)
}
}).catch(e => {
self.$message.error('服务端出错')
})
}
})