技术栈: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>
Logo

前往低代码交流专区

更多推荐