vue校验input中前后空格

原创已于 2022-09-08 15:53:10 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

于 2022-09-08 15:47:31 首次发布

前端同时被 3 个专栏收录

8 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

element

5 篇文章

订阅专栏

本文介绍了在用户提交信息时如何使用正则表达式校验用户名和手机号码，防止它们含有前后空格。通过创建RegExp对象进行匹配，并在验证失败时显示错误信息。该方法同样适用于表单验证，可以结合ElementUI的form表单自定义校验功能使用。

1.需求介绍：点击提交时校验用户名和手机号是否含有前后空格，如果含有提示错误信息

2.methods

//RegExp()正则表达式匹配
  let judgeFn = new RegExp(/\s+/g);
//校验用户名称是否含有空格
  if (judgeFn.test(username)) {
      this.$message({
          type: 'error',
          message: `您输入的用户名含有空格`
      });
      return;
  }
//校验租户手机是否含有空格
  if (judgeFn.test(userMobile)) {
      this.$message({
          type: 'error',
          message: `您输入的手机号含有空格`
      });
      return;
  }
  //如果检验通过在继续执行其他操作

3.也可以通过这个返回的值来实现form表单那种验证，理论是一样的，具体可以在elementui 中的form表单自定义校验里查看