后台管理项目input输入框禁止用户输入表情代码实现如下
<el-input
@input="prodDetail.prodName = prodDetail.prodName.replace(reg, '')"
v-model.trim="prodDetail.prodName"
clearable
></el-input>
data(){
return {
reg: /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi,
}
}
vue自定义表单校验三种方式
<el-form :model="listQuery" ref="listQueryForm">
//对应第一种校验方式
<el-form-item label="销售单位编号:" prop="companyNo">
<el-input
v-model.trim="changeForm.companyNo"
placeholder="请输入销售单位编号"
></el-input>
</el-form-item>
//对应第二种校验方式
<el-form-item label="饲养地址:" prop="breedAddress">
<!-- 省 市和区省略,同省一致,只是绑定数据不一致而已 -->
<el-col :span="8">
<el-select
v-model="changeForm.provinceCode"
placeholder="省"
@change="provChange"
>
<el-option
v-for="item in proData"
:key="item.provinceCode"
:label="item.provinceName"
:value="item.provinceCode"
></el-option>
</el-select>
</el-col>
</el-form-item>
//对应第三种校验方式
<el-form-item label="经度:" prop="longitude">
<el-input
placeholder="请输入经度"
v-model="changeForm.longitude"
></el-input>
</el-form-item>
</el-form>
//第一种 实现方式
changeFormRules: {
companyNo: [
{ required: true, message: "请输入销售单位编号", trigger: "blur" },
{ min: 1, max: 20, message: "长度不得超过20", trigger: "blur" },
{
pattern: /^[A-Za-z0-9]+$/,
message: "仅支持英文与数字格式",
trigger: "blur",
},
],
}
// 第二种实现方式
changeFormRules: {
breedAddress: [
{
required: true,
validator: (rules, value, cb) => {
if (
!this.changeForm.provinceCode ||
!this.changeForm.cityCode ||
!this.changeForm.areaCode ||
!this.changeForm.address
) {
return cb(new Error("饲养地址不能为空!"));
} else if (this.changeForm.address.length > 40) {
return cb(new Error("长度不得超过40"));
}
return cb();
},
trigger: "blur",
},
],
}
//第三种方式---->主要用于单个表单规则较多的情况(写在data方法内部,return方法外部)
1、第一步定义:
data(){
// 经度
var checklongitude = (rule, value, cb) => {
const regA = /^\d+(?=\.{0,1}\d+$|$)/;
const regB = /^\d+(\.\d{0,6})?$/;
if (value == "") {
return cb();
} else if (
this.changeForm.longitude <= -180 ||
this.changeForm.longitude >= 180
) {
return cb(new Error("经度范围-180~180"));
} else if (regA.test(value) || regB.test(value)) {
return cb();
} else {
return cb(new Error("请输入正确格式经度"));
}
};
return {
第二步:引用
changeFormRules: {
longitude: [{ validator: checklongitude, trigger: "blur" }],
}
}
}
常见正则表达式
仅支持英文与数组格式:
/^[A-Za-z0-9]+$/
身份证号:
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/
手机号:
/^1[3|4|5|7|8][0-9]\d{8}$/
座机号
/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
至少包含数字和英文,长度6-20
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
只允许输入中文与英文
/^[\u4e00-\u9fa5a-zA-Z]+$/
链接必须是http:// 或者https://
/(http|https):\/\/([\w.]+\/?)\S*/