el-input输入框的空格问题

最新推荐文章于 2024-08-13 15:17:51 发布

爱喝冬瓜汤的外星人

最新推荐文章于 2024-08-13 15:17:51 发布

阅读量3.6k

点赞数 3

分类专栏： vue-elementui

本文链接：https://blog.csdn.net/qq_41893334/article/details/113308866

版权

vue-elementui 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue.js+ElementUI的表单中实现输入内容去除两端空格的需求，同时允许输入空格且不影响表单验证。通过在失去焦点时使用`blur`事件结合`.trim()`方法，确保了输入内容在提交时不包含首尾空格。示例代码展示了在多个表单项中应用此方法的实现过程。

摘要由CSDN通过智能技术生成

技术栈：vue + elementui
需求：在表单中，输入的内容要去除两端空格
1.允许输入空格
2.输入空格后表单非空验证不通过

解决方式1：使用v-model的指令修饰符.trim(缺点：不能输入空格，不满足需求)
解决方法2：使用blur方法在失去焦点时进行trim（）

<el-form
    ref="form"
    :model="formData"
    :rules="formRules"
    style="width:80%;margin-top:20px;"
    size="small"
    label-width="100px"
>
    <el-form-item label="当前节点" prop="moduleId">
        <el-input 
        readonly
        v-model="formData.moduleId" 
        @blur="formData.moduleId=$event.target.value.trim()"
        ></el-input>
    </el-form-item>
    <el-form-item label="父节点" prop="parentId">
        <el-input 
        readonly
        v-model="formData.parentId"
        @blur="formData.parentId=$event.target.value.trim()"
            ></el-input>
    </el-form-item>
    <el-form-item label="名称" prop="moduleName">
        <el-input 
        placeholder="模块名称"
        @blur="formData.moduleName=$event.target.value.trim()"
        v-model="formData.moduleName"></el-input>
    </el-form-item>
    <el-form-item label="编码" prop="moduleCode">
        <el-input 
        placeholder="模块编码"
        @blur="formData.moduleCode=$event.target.value.trim()"
        v-model="formData.moduleCode"></el-input>
    </el-form-item>
    <el-form-item label="图标">
        <el-input 
        placeholder="图标样式class"
        @blur="formData.moduleIcon=$event.target.value.trim()"
        v-model="formData.moduleIcon"></el-input>
    </el-form-item>
    <el-form-item label="模块类型" prop="moduleType">
        <el-select style="width:100%;" v-model="formData.moduleType">
            <el-option value="3" label="菜单目录"></el-option>
            <el-option value="4" label="页面按钮"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="系统编码">
        <el-input 
        placeholder="系统编码"
        @blur="formData.sysCode=$event.target.value.trim()"
        v-model="formData.sysCode"></el-input>
    </el-form-item>
    <el-form-item label="功能类型">
        <el-radio-group v-model="formData.appType">
            <el-radio label="1">PC端</el-radio>
            <el-radio label="2">移动端</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="顺序号" prop="sort">
        <el-input 
        placeholder="顺序号"
        @blur="formData.sort=$event.target.value.trim()"
        v-model="formData.sort"></el-input>
    </el-form-item>
    <el-form-item label="功能URL" prop="actionUrl">
        <el-input 
        placeholder="功能URL"
        @blur="formData.actionUrl=$event.target.value.trim()"
        v-model="formData.actionUrl"></el-input>
    </el-form-item>
    <el-form-item label="帮助URL">
        <el-input 
        placeholder="帮助URL"
        @blur="formData.helpUrl=$event.target.value.trim()"
        v-model="formData.helpUrl"></el-input>
    </el-form-item>
    <el-form-item label="模块描述">
        <el-input 
        type="textarea" 
        placeholder="编辑模块描述..."
        @blur="formData.moduleDesc=$event.target.value.trim()"
        v-model="formData.moduleDesc"></el-input>
    </el-form-item>
    <el-form-item v-if="control.save">
        <el-button type="primary" @click="save">保存</el-button>
    </el-form-item>
</el-form>