el-input正则手机号

要在el-input组件上添加正则手机号验证，您可以根据以下步骤进行操作：
1. 在Vue的data中添加一个名为phoneNumber的函数，该函数用于验证手机号码。可以使用正则表达式来验证手机号码的格式。例如，您可以使用以下正则表达式：/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/。
2. 将phoneNumber函数作为validator传递给rules对象中phone字段的验证规则。
3. 在el-input组件上使用v-model指令绑定手机号码的值，并使用type="text"来确保输入为文本类型。
4. 添加其他必要的属性，如size、auto-complete和placeholder等。
以下是一个示例代码片段，展示了如何在el-input组件上添加正则手机号验证：

<el-form-item label="手机号码" prop="phone">
  <el-input v-model="ruleForm.phone" type="text" size="large" auto-complete="off" placeholder="请输入手机号码">
  </el-input>
</el-form-item>

data() {
  var phoneNumber = (rule, value, callback) => {
    const reg = /^(13

相关问题

el-input正则校验手机号怎么使用

可以使用`el-input`的`pattern`属性来实现手机号的正则校验。具体实现步骤如下：

1. 在`el-input`中添加`pattern`属性，值为手机号的正则表达式。

<el-input v-model="mobile" placeholder="请输入手机号" pattern="^1[3456789]\d{9}$"></el-input>

2. 在`el-form-item`中添加`rules`属性，值为一个数组，数组中每个对象表示一条校验规则。

<el-form-item label="手机号" prop="mobile" :rules="[{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }]">
  <el-input v-model="mobile" placeholder="请输入手机号" pattern="^1[3456789]\d{9}$"></el-input>
</el-form-item>

其中，`pattern`表示校验的正则表达式，`message`表示校验失败时的提示信息，`trigger`表示校验的时机，这里设为失去焦点时触发。

el-input正则校验手机号怎么使用。

可以使用el-input的属性v-pattern来进行正则校验手机号。

具体步骤如下：

1. 在模板中添加el-input组件，并设置v-pattern属性值为正则表达式。

<el-input v-model="mobile" placeholder="请输入手机号" v-pattern="'^1[0-9]{10}$'" />

2. 在Vue实例中定义mobile变量，并在data属性中初始化为空字符串。

data() {
  return {
    mobile: '',
  }
}

3. 在Vue实例中定义computed属性，用于判断手机号是否符合正则表达式。

computed: {
  isMobileValid() {
    const regex = /^1[0-9]{10}$/
    return regex.test(this.mobile)
  },
},

4. 在el-button的disabled属性中绑定isMobileValid属性，用于判断按钮是否可用。

<el-button :disabled="!isMobileValid">提交</el-button>

完整代码如下：

<template>
  <div>
    <el-input v-model="mobile" placeholder="请输入手机号" v-pattern="'^1[0-9]{10}$'" />
    <el-button :disabled="!isMobileValid">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
    }
  },
  computed: {
    isMobileValid() {
      const regex = /^1[0-9]{10}$/
      return regex.test(this.mobile)
    },
  },
}
</script>