vant输入框表单验证

### Vant 输入框设置必填项校验规则 Vant 是一个轻量级的移动端 Vue 组件库，提供了丰富的组件来满足移动开发中的各种需求。对于输入框的必填项校验，可以通过 `v-model` 双向绑定数据，并结合自定义校验逻辑实现。 以下是具体实现方法： #### 方法一：使用内置的校验功能 Vant 的 Form 表单组件支持内置校验功能，可以方便地配置字段为必填项并触发相应的样式变化。 ```html <van-form @submit="onSubmit"> <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]"/> <div style="margin: 16px;"> <van-button round block type="info" native-type="submit">提交</van-button> </div> </van-form> ``` 在此代码中，`van-field` 使用了 `:rules` 属性指定校验规则，其中 `{ required: true }` 定义该字段为必填项[^3]。当用户未填写此字段时，会自动提示错误消息，并且输入框周围会有红色边框标记。 #### 方法二：手动控制样式与校验状态 如果不想依赖于 Vant 提供的默认校验机制，也可以通过监听输入事件动态改变样式的类名来达到相同效果。 ```html <template> <div> <input class="custom-input" :class="{ error: isUsernameError }" v-model="username" @blur="validateUsername" placeholder="请输入用户名" /> <p v-if="isUsernameError" class="error-message">用户名不能为空</p> </div> </template> <script> export default { data() { return { username: '', isUsernameError: false, }; }, methods: { validateUsername() { this.isUsernameError = !this.username.trim(); // 如果为空，则标记为错误 } } }; </script> <style scoped> .custom-input.error { border-color: red; } .error-message { color: red; font-size: small; } </style> ``` 在这个例子中，我们创建了一个名为 `.error` 的 CSS 类用于标红输入框边界线，并利用 JavaScript 来检测用户的输入是否有效[^4]。一旦失去焦点 (`@blur`) 并发现内容为空，就激活这个错误状态。 #### 结合两种方式的优点 实际应用中可以根据项目复杂度选择合适的方式或者混合两者优势。比如先尝试简单的内置校验方案，再针对特殊场景补充额外的手动处理逻辑。 ```javascript // 自定义正则表达式验证函数作为扩展案例 const phonePattern = /^1[3|4|5|7|8][0-9]{9}$/; return { data() { return { form: { phoneNumber: '' }, rules: { phoneNumber: [ { required: true, message: '手机号码不可为空'}, { pattern: phonePattern, message: '请输入有效的手机号'} ] } }; } }; ``` 以上展示了更复杂的校验情况——不仅限于简单是否存在值的要求，还加入了格式匹配条件[^5]。 --- ###

### 实现 Vant 输入框限制小数点后两位 为了在 Vant 框架中实现输入框只允许用户输入最多两位小数，可以通过 `v-model` 和自定义处理函数来控制输入的内容。具体来说，在绑定的数据变化时通过监听器截取并修正用户的输入。 对于 Vant 的 `<van-field>` 组件而言，可以在其上应用 `@input` 或者 `@change` 事件处理器来进行实时验证和调整[^2]： ```html <template> <div> <!-- 使用 van-field 来创建一个带有标签的输入区域 --> <van-cell-group> <van-field v-model="hospitalInfo.price" input-align="right" placeholder="请输入价格" label="商品单价：" @input="formatInputValue" readonly clickable inputmode="decimal" /> </van-cell-group> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; // 定义响应式的 hospitalInfo 对象用于存储表单字段值 const hospitalInfo = ref({ price: '' }); /** * 处理输入框中的数值， * 确保它不超过两个小数位。 */ function formatInputValue(value: string): void { let newValue = value; // 移除所有非数字字符以及多余的. const cleanedString = String(newValue).replace(/[^0-9.]/g, ''); // 如果存在多个 . 则仅保留第一个 . if (cleanedString.indexOf('.') >= 0) { newValue = cleanedString.replace(/^(\d*\.\d*)\d*$/, '$1'); // 控制精度为2位小数 newValue = parseFloat(newValue).toFixed(2); } // 更新视图模型 hospitalInfo.value.price = newValue; } </script> ``` 上述代码片段展示了如何利用 Vue.js 结合 Vant UI 库构建一个能够自动格式化输入值以保持至多两位小数的有效方案。这里的关键在于每当用户尝试更改输入框内的内容时都会触发 `formatInputValue()` 方法，此方法负责清理非法字符并将最终结果限定在一个合理的范围内[^3]。