首页 前端知识 element input 输入框校验

element input 输入框校验

2024-09-08 02:09:17 前端知识 前端哥 804 488 我要收藏

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>

在这里插入图片描述
记录一下,记录一下~~~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17868.html
标签
评论
发布的文章

数据持久化(Json)

2024-09-28 23:09:01

JSON Gate 开源项目教程

2024-09-28 23:09:00

【C 】Ubuntu安装jsoncpp

2024-09-28 23:09:58

http请求json

2024-09-28 23:09:58

JSON 格式详解

2024-09-28 23:09:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!