VUE input输入框禁止输入表情控制+自定义校验的几种方式+常见的正则表达式

后台管理项目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*/