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>