vue+elementui判断输入框输入是否符合电话号码的长度

您可以通过监听输入框的值，然后使用正则表达式判断输入是否符合电话号码的长度。以下是一个例子：

<template>
  <el-input v-model="phone" placeholder="请输入电话号码"></el-input>
</template>

<script>
export default {
  data() {
    return {
      phone: ""
    };
  },
  watch: {
    phone(val) {
      // 匹配电话号码的正则表达式
      const reg = /^1[3456789]\d{9}$/;
      if (reg.test(val)) {
        console.log("符合电话号码长度");
      } else {
        console.log("不符合电话号码长度");
      }
    }
  }
};
</script>

在 `watch` 中监听 `phone` 的值，然后使用正则表达式 `^1[3456789]\d{9}$` 判断输入的值是否符合电话号码的长度要求（11位数字，以1开头）。如果符合，输出“符合电话号码长度”，否则输出“不符合电话号码长度”。

相关问题

vue使用elementui数组怎么验证

这是一个技术问题，可以直接回答。在使用element-ui的表单验证时，有一个名为rules的属性，可以给表单元素绑定验证规则。当表单元素失去焦点或提交表单时，验证规则会自动触发进行验证。例如，如果要验证一个长度为6-20位的密码输入框，可以在rules中添加一个名为password的验证规则：

rules: {
  password: [
    { required: true, message: '请输入密码'},
    { min: 6, max: 20, message: '密码长度应为6-20位' }
  ]
}

此时，当密码框为空或长度不符合要求时，会提示对应的错误信息。

elementUI如何让输入框变红

要让 ElementUI 中的输入框变红，可以使用 ElementUI 提供的表单验证功能。具体步骤如下：

1. 在输入框上添加验证规则属性 `:rules`，并绑定一个数组对象，例如：

<el-form-item label="用户名" prop="username">
  <el-input v-model="username" :rules="usernameRules"></el-input>
</el-form-item>

2. 在 Vue 实例中定义验证规则数组对象，并在其中添加一个 `validator` 函数，用于验证输入框的值是否符合要求，如果不符合，则返回一个错误信息：

data() {
  return {
    username: '',
    usernameRules: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符之间', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value !== 'admin') {
            callback(new Error('用户名必须为 admin'));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      }
    ]
  }
}

3. 在需要显示错误信息的元素上添加 `show-error` 属性，例如：

<el-form-item label="用户名" prop="username">
  <el-input v-model="username" :rules="usernameRules" show-error></el-input>
</el-form-item>

4. 在 CSS 样式中定义错误信息的样式，例如：

.el-form-item__error {
  font-size: 12px;
  color: red;
}

这样，当用户输入的值不符合规则时，输入框会自动变成红色，并在输入框下方显示错误信息。