2026.5.12@霖宇博客制作中遇见的问题

1oneel-form :modelpasswordForm :rulesrules refformRef label-width100px el-form-item label原密码 propoldPassword el-input v-modelpasswordForm.oldPassword typepassword placeholder请输入原密码 show-password / /el-form-item解读这段代码这段代码是使用 Vue.js 和 Element Plus UI 库构建的一个表单片段专门用于收集用户的“原密码”。下面为你逐层解读 整体结构el-form 组件el-form 是 Element Plus 提供的表单容器组件它负责整合和管理内部所有表单项的数据和校验规则。- :modelpasswordForm- 这是一个数据绑定。它将表单与一个名为 passwordForm 的响应式数据对象关联起来。表单内所有输入框的值都会同步到这个对象中。- :rulesrules- 这是校验规则的绑定。它将一个名为 rules 的对象作为整个表单的校验规则集。这个 rules 对象里定义了每个字段如 oldPassword需要遵守的规则比如是否必填、长度限制等。- refformRef- 这是一个引用标识。它为这个 el-form 组件实例起了一个名字叫 formRef。在 JavaScript 代码中你可以通过 formRef 来获取这个表单实例并调用其方法例如 formRef.value.validate() 来手动触发表单的整体校验。- label-width100px- 这是一个样式设置。它统一设置了表单内所有标签label的宽度为 100 像素使表单看起来更整齐对齐。✍️ 表单项el-form-item 组件el-form-item 是表单中的单个项目容器用于包裹一个标签和一个输入控件。- label原密码- 这定义了该表单项的标签文本即用户看到的“原密码”这几个字。- propoldPassword- 这是实现校验的关键。它指定了当前这个表单项对应 passwordForm 数据模型中的哪个属性。Element Plus 会根据这个 prop 的值去 :rules 对象中找到对应的校验规则并对 passwordForm.oldPassword 的值进行验证。⌨️ 输入控件el-input 组件el-input 是 Element Plus 提供的输入框组件。- v-modelpasswordForm.oldPassword- 这是双向数据绑定。它将输入框的值与 passwordForm 对象里的 oldPassword 属性实时同步。用户在输入框中输入内容时passwordForm.oldPassword 的值会随之改变反之亦然。- typepassword- 这指定了输入框的类型为密码框。用户输入的字符会被隐藏通常显示为圆点或星号。- placeholder请输入原密码- 这是在输入框为空时显示的灰色提示文字。- show-password- 这是 Element Plus 提供的一个便捷功能。它会在输入框右侧添加一个“小眼睛”图标用户可以点击该图标来切换显示或隐藏输入的密码明文。总结来说这段代码创建了一个带有“原密码”标签的密码输入框。它在视觉上提供了“显示/隐藏密码”的功能在逻辑上将用户的输入值实时保存到 passwordForm.oldPassword 变量中并且准备就绪可以根据预设的规则对这个输入值进行校验。2.two// 密码的校验规则 password: [ // 规则1必填校验 { required: true, message: 请输入密码, trigger: blur }, // 规则2限制密码长度在 6 到 20 个字符之间 { min: 6, max: 20, message: 密码长度在 6 到 20 个字符, trigger: blur } ],密码中不能包含空格怎么写要实现密码中不能包含空格最优雅和直接的方法是使用正则表达式进行校验。你可以在现有的 password 校验规则数组中添加一个新的规则对象。 解决方案使用正则表达式你可以添加一个 pattern 规则利用正则表达式 /^\S$/ 来确保输入的字符串不包含任何空白字符包括空格、制表符等。修改后的代码如下javascript编辑1// 密码的校验规则2password: [3 // 规则1必填校验4 { required: true, message: 请输入密码, trigger: blur },5 // 规则2限制密码长度在 6 到 20 个字符之间6 { min: 6, max: 20, message: 密码长度在 6 到 20 个字符, trigger: blur },7 // 规则3禁止输入任何空格8 { pattern: /^\S$/, message: 密码中不能包含空格, trigger: blur }9],代码解读- pattern: /^\S$/- ^ 和 $分别代表字符串的开始和结束确保对整个字符串进行匹配。- \S这是一个特殊字符代表“非空白字符”。它与 \s (代表空格、制表符等) 相反。- 表示前面的元素即 \S可以出现一次或多次。- 综合起来/^\S$/ 的意思是整个字符串必须完全由一个或多个非空白字符组成。只要出现一个空格校验就会失败。✨ 进阶方案自定义校验函数如果你的密码规则变得更复杂比如要求同时包含字母、数字和特殊符号并且不能有空格那么使用自定义校验函数 (validator) 会更灵活。javascript编辑1// 密码的校验规则2password: [3 { required: true, message: 请输入密码, trigger: blur },4 { min: 6, max: 20, message: 密码长度在 6 到 20 个字符, trigger: blur },5 // 使用自定义函数进行更复杂的校验6 {7 validator: (rule, value, callback) {8 if (!value) {9 // 这个错误会被上面的 required: true 规则捕获这里可以省略10 return callback();11 }12 // 检查是否包含空格13 if (/\s/.test(value)) {14 callback(new Error(密码中不能包含空格));15 } else {16 callback(); // 校验通过17 }18 },19 trigger: blur20 }21],对于你目前的需求第一种使用 pattern 的方案更加简洁高效。3threeusername: [ { required: true, message: 请输入用户名, trigger: blur } ],用户名只能输入大小写字母和数字不能有特殊字符要实现用户名只能包含大小写字母和数字你可以利用 Element Plus 表单校验规则中的 pattern 属性通过一个正则表达式来限制输入内容。你只需要在现有的 username 规则数组中添加一个新的规则对象即可。 解决方案使用正则表达式添加的规则如下javascript编辑1{ pattern: /^[a-zA-Z0-9]$/, message: 用户名只能包含字母和数字, trigger: blur }代码解读- pattern: /^[a-zA-Z0-9]$/- ^ 和 $分别代表字符串的开始和结束确保对整个字符串进行匹配而不是部分匹配。- [a-zA-Z0-9]这是一个字符集表示只允许匹配小写字母 (a-z)、大写字母 (A-Z) 和数字 (0-9)。- 表示前面的字符集可以出现一次或多次。这确保了用户名不能为空当然空值的校验已经由 required: true 处理了。- 综合起来这个正则表达式的意思是整个字符串必须完全由一个或多个字母或数字组成。完整代码示例将新规则加入后你的 username 校验规则应该像这样javascript编辑1username: [2 { required: true, message: 请输入用户名, trigger: blur },3 { pattern: /^[a-zA-Z0-9]$/, message: 用户名只能包含字母和数字, trigger: blur }4],4.four该错误的核心原因是MySQL 在执行 SQL 更新时接收到一个本应是整数值的参数id但实际传入的却是一个 Java 对象的序列化字节流以 \xAC\xED\x00\x05 开头这是 Java 对象序列化特有的魔数。从堆栈中的 SQL 语句sqlUPDATE admin SET password? WHERE (id ?)可以看到更新时两个占位符分别对应 password字符串和 id整数。而错误信息明确指出 “Truncated incorrect INTEGER value”说明在设置 id 参数时数据库收到的数据不是整数而是类似 com.blog.personalBlogAdmin.admin.entity.po.Admin 对象的序列化内容。常见的原因有以下几种Mapper 方法参数传递错误在 AdminMapper 中可能自定义了一个 update 方法但调用时错误地将整个 Admin 实体对象传给了 id 参数的位置。例如adminMapper.update(password, admin) 或 adminMapper.update(admin) 而 SQL 映射中却写了 where id #{xxx}导致 MyBatis 把 admin 对象尝试转换成 INTEGER。误用 MyBatis-Plus 的 update 方法调用 update(T entity, WrapperT wrapper) 时如果不小心将 entity 传给了 wrapper 参数或者 Wrapper 中错误地使用了对象而非条件字段可能导致条件值变成整个对象序列化后的形式。或者直接写了 adminMapper.update(admin, null)并且 admin 对象的某个字段如 id被错误地映射到了 SQL 中的 id 占位符。使用了不正确的 Param 注解或 XML 参数引用若在 Mapper 接口中定义了类似 int update(Param(password) String password, Param(admin) Admin admin);但在 XML 中却写了 where id #{admin}就会把整个 Admin 对象作为参数填充到 id 位置上。序列化问题较少见如果某个拦截器或处理器错误地将对象直接写入 JDBC 参数而不经过类型转换也可能导致此现象。但从堆栈看更可能是代码层面的参数错位。排查建议检查 AdminBaseFacade.resetOneselfPassword 方法第 266 行附近的调用确认传递给 adminMapper.update(...) 的参数是否正确。如果使用的是 MyBatis-Plus 的 updateById(admin)请确保 admin.getId() 返回的是 Integer 或 Long 类型且不为空同时确认 admin 对象没有被序列化成奇怪的格式传递到 SQL 中一般 updateById 不会出现此问题除非自定义了其他拦截器。检查 AdminMapper 中是否存在自定义的 update 方法XML 或注解核实参数名称与顺序是否匹配。简单来说就是本应放 id 值的地方放了一个 Java 对象导致数据库无法把序列化字节流转换成整数。5.five