element input 输入框校验

最新推荐文章于 2025-06-09 10:51:23 发布

陈怂怂

最新推荐文章于 2025-06-09 10:51:23 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：其他不想分类文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/qq_42581563/article/details/129280355

其他不想分类专栏收录该内容

15 篇文章

订阅专栏

文章介绍了如何使用正则表达式在ElementUI的Input输入框中进行数据校验，包括限制输入中文、邮箱、手机号和中英文数字特殊字符。提供了不同场景下的校验规则示例，并讨论了两种处理非法输入的方法，一种是实时替换，另一种是通过变量保留正确值。此外，还提到了ElementPlus中的formatter和parser属性用于格式化输入值。

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

element input 输入框校验

很久之前有写过一篇：element 输入框只可以输入正整数

在这里对它进行补充

校验input输入框是否符合

以下是常用的一些：
限制输入中文：/^[\u4e00-\u9fa5]+$/

const checkName = (rule, value, callback) => {
 if (/^[\u4e00-\u9fa5]+$/.test(value) === false) {
    callback(new Error('请输入中文'))
  } else {
    // 校验通过
    callback()
  }
}

限制输入校验邮箱格式：/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/

const checkEmail = (rule, value, callback) => {
 if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) == false) {
    callback(new Error('请输入邮箱'))
  } else {
    // 校验通过
    callback()
  }
}

限制输入手机号：/^[\u4e00-\u9fa5]+$/

const checkMobile = (rule, value, callback) => {
 let reg = /^1[3456789]\d{9}$/
  if (!value) {
    callback(new Error('请输入联系人手机号码'))
  } else if (value.length < 11) {
    callback(new Error('手机号必须是11位'))
  } else if (!reg.test(value)) {
    callback(new Error('手机号格式不正确'))
  } else {
    callback()
  }
}

只能输入中英文，数字，‘-’，‘_’ ： /^[A-Za-z0-9-_\u4e00-\u9fa5]{4,30}$/

const checkAddress = (rule, value, callback) => {
  if (/^[A-Za-z0-9-_\u4e00-\u9fa5]{4,30}$/.test(value) === false) {
    callback(new Error('请输入'))
  } else {
    // 校验通过
    callback()
  }
}

当然也可以写在

rules: {
  name: [
    { required: true, message: "请输入中文", trigger: "blur" },
    {
      validator: function(rule, value, callback) {
        if (/^[\u4e00-\u9fa5]+$/.test(value) === false) {
          callback(new Error("请输入中文"));
        } else {
          //校验通过
          callback();
        }
      },
      trigger: "blur"
    }
  ],
}

当然还有很多正则~~

input 不给输入不符合条件的字符

举个例子

方法一：

输入框只能输入中文，输入数字输入不进去：

<el-form-item label="名称" prop="name">
  <el-input
       v-model="ruleForm.name"
       type="text"
       onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g, '')"
   ></el-input>
</el-form-item>

这种方式确实可以但是有个毛病
虽然输入不进去，但是绑定值打印出来会乱入一些不符合的值
在这里插入图片描述

方法二：

  // 联系人校验--错误不允许输入
    changeValue(value) {
      if (/^[\u4e00-\u9fa5]*$/.test(value)) {
        this.ruleForm.contactPerson = value
         //originalContact 为了保留正确的值 
        this.originalContact = this.ruleForm.contactPerson
      } else {
        this.ruleForm.contactPerson = this.originalContact
      }
    },

体验感会比较好，用一个变量保留正确的值，输入错误重新赋值

在element plus 中有一个很好方法

<template>
  <el-input
    v-model="input"
    placeholder="Please input"
    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>