vue3表单校验 正则-只允许输入英文大小写、数字

该内容描述了用户名的输入要求,必须是5-10位的数字或大小写字母组成,并且在输入时会进行blur和change事件触发的正则匹配验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 username: [
        { required: true, message: '用户名不能为空' },
        {
          message: '请输入5-10位数字或大小写字母组成的用户名',
          pattern: /^[a-zA-Z0-9]{5,10}$/,
          trigger: ['blur', 'change'],
        },
      ],

 

### 实现 `el-input` 组件仅限输入数字 &#39;NA&#39; 为了使 `el-input` 组件能够接受仅数字或特定字符串 `&#39;NA&#39;` 的输入,可以通过定义一个合适的正则表达式来验证用户的输入。该正则表达式的构建应考虑两种情况: - 输入全部由数字组成。 - 或者输入正好是大小写不敏感的字符串 `"NA"`。 满足上述条件的一个可能方案如下所示[^1]: ```javascript // 定义用于检验输入合法性的正则表达式 const validInputPattern = /^(?:\d+|NA)$/i; ``` 此模式解释为: - `^`: 断言位置处于字符串起始处; - `(?:...)`: 非捕获组,用来组合子表达式而不创建回溯边界; - `\d+`: 表示一位或多位于数字符; - `|`: 或运算符,在这里表示前面的部分(`\d+`)与后面部分(&#39;NA&#39;)之间选择其一; - `NA`: 字面量匹配单词 "NA"; - `/i`: 忽略大小写的标志位,使得大写或小写字母都能成功匹配; - `$`: 断言位置处于字符串结束处; 当应用于 Vue.js Element UI 库中的 `el-input` 控件时,可以在组件属性里设置 `v-model` 双向绑定变量,并利用表单验证功能配合自定义规则来进行实时校验[^2]。 下面是一个完整的例子展示如何将这个逻辑集成到实际项目中去: ```html <template> <el-form :model="formInline" :rules="rules"> <el-form-item prop="inputValue"> <el-input v-model.trim="formInline.inputValue"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { formInline: { inputValue: &#39;&#39; }, rules: { inputValue: [ { validator(rule, value, callback) { const pattern = /^(?:\d+|NA)$/i; if (!pattern.test(value)) { callback(new Error(&#39;请输入有效数值或 NA&#39;)); } else { callback(); } }, trigger: [&#39;blur&#39;, &#39;change&#39;] } ] } }; } }; </script> ``` 在这个实例中,每当用户尝试提交含有非法字符的数据时,都会触发错误提示信息告知他们重新输入有效的数据形式——即纯数字序列或是固定的两个英文字母组成的字符串 `&#39;NA&#39;`。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值