步骤：
表单中：
<el-form ref="ruleForm" :model="form" :rules="rules">
<el-form-item label="上级地区:" prop="region" :label-width="formLabelWidth">
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleChange"
/>
</el-form-item>
<el-form-item label="名称:" prop="name" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off" style="width:199px" />
</el-form-item>
<el-form-item label="行政代码:" prop="code" :label-width="formLabelWidth">
<el-input v-model.trim="form.code"
oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
tyle="width:199px"
@blur="salaryChange"
/>
trim:禁止输入空格
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
</div>定义数据：
data() {
return {
form: { region: '' },
rules: {
code: [
{ required: true, message: '请输入行政代码', trigger: 'blur' }
]
}
}
},定义方法：
// 行政代码失焦
salaryChange(e) { //失去焦点时将校验通过的值赋给input框
console.log(`------------`, e)
this.form.code = e.target.value
},
// 表单验证
submitForm(formName) {
this.$refs[formName].validate((valid) => { //重点是ref绑定必须一致
if (valid) {
alert('submit!')
this.dialogFormVisible = false
} else {
console.log('error submit!!')
return false
}
})
}看效果：
