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>
记录一下,记录一下~~~