后台管理项目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) => {
                !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*/
                    后台管理项目input输入框不可以输入表情代码实现如下 &lt;el-input    @input="prodDetail.prodName = prodDetail.prodName.replace(reg, '')"    v-model.trim="prodDetail.prodName"    clearable &gt;&lt;/el-input&gt; data(){     return {       reg: /[\uD83C|\uD83D|\uD83E][\uDC00-
				
在开发的功能交付测试的时候,测试提出来文本框不能输入表情的bug(这也算一个bug?哪位大神会进行这样的反人类操作啊),说归说,既然提出来了,那咱还得改不是,具体代码如下所示: 首先声明一个输入框: <a-form-item label="" name="searchValue"> <a-input v-model:value.trim="formState.searchValue" autocomplete="off" placeholder="请输入姓名或工号" @ch
输入框禁止输入表情符号,在这里记录一下 <el-input v-model="inputValue" @input="inputVal('inputValue',$event)"></el-input> methods中的方法 // 禁止input输入表情 inputVal(type,e){ console.log(type,e,'--------') let reg = /([0-9|*|#]\uFE0F\u20E3)|([
// 判断是否含有特殊符号 let reg1 = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/im // 判断是否含有emoji表情 let reg2 = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\.
vuejs 聊天 Vue聊天表情符号 (Vue Chat Emoji) A simple chat emoji for vuejs. vuejs的简单聊天表情符号。 安装 (Installation) npm install vue-chat-emoji 用法 (Usage) using inside component 使用内部组件 <template> <di...
项目中测试提出问题,在Input输入框输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情 在网上看到一些方法,参考地址,可以实现实现输入的时候不能输入表情,但是鼠标点击win10输入框后面的表情时,还是能输入的。 所以我对以上方法做了一点改造,实现了我想要的效果,如下图所示 最近的项目用到了表情包,咱们以前项目有用到emoji-vue。我就直接拿来用了。使用过程中真的一言难尽啊~~~~~ 先附上一张这个插件在Vue中使用的列子。可以清楚的看到一个比较重要的方法onInput和myText属性。没错这就是我一言难尽的地方,使用这个demo会出现两个问题 这里有个在线测试地址emoji-vue在线测试 接下来咱们提提这个插件两处问题,先给一张自己测试的图。 1 我测试的时候,开始输入了文字,后面准备在文字后面添加表情,但是无论怎么搞,表情都会在前面添加 2 另一个问
Vue 是一款流行的前端框架,可以自定义指令来实现特定的功能。如果要校验输入为 2 位小数数字,可以自定义一个指令来实现。 首先,需要在 Vue 中注册一个自定义指令。指令分为全局指令和局部指令,在这里我们注册一个局部指令。 Vue.directive('decimal', { bind: function(el, binding, vnode) { // 逻辑代码 然后,在 bind 钩子中编写校验逻辑。校验逻辑可以使用正则表达式。可以使用 v-model 指令将输入框和指令绑定。 Vue.directive('decimal', { bind: function(el, binding, vnode) { el.addEventListener('input', function() { let input = this.value; if (input.indexOf('.') != -1) { input = input.substring(0, input.indexOf('.') + 3); let reg = /^\d+(\.\d{1,2})?$/; if (reg.test(input)) { vnode.componentInstance.$emit('input', input); } else { this.value = binding.value; 这段代码中,使用 addEventListener 给输入框添加 input 事件监听器。在监听器中对输入的值进行校验,如果输入的值不符合要求,则将输入框的值改为之前的值。 最后,将指令绑定到输入框上。 <input v-model="number" v-decimal /> 这样,输入框就可以校验输入为2位小数数字了。