Vue el-input限制输入的字符（多种情况 进来看吧）

通过@input

• 只能输入英文大小写和数字 及最大长度maxlength

         <el-form-item label="经营许可证号" prop="businessCertificate">
             <el-input
                    v-model="tableList.businessCertificate"
                    maxlength="50"
                    placeholder="请输入经营许可证号"
                    @input="
                    tableList.businessCertificate =
                          tableList.businessCertificate.replace(/[\W]/g, '')
                     "
                     clearable
            ></el-input>
         </el-form-item>

• 只能输入汉字和字母

    <el-form-item  prop="leaderName">
           <el-input
                   v-model="tableList.leaderName"
                   placeholder="请输入...."
                   maxlength="50"
                   @input="
                        tableList.leaderName = tableList.leaderName.replace(
                          /[^\a-\z\A\u4E00-\u9FA5]/g,
                          ''
                        )
                   "
                   clearable
            ></el-input>
    </el-form-item>

• 只支持输入数字

     <el-form-item label="...." prop="leaderPhone">
           <el-input
               v-model="tableList.leaderPhone"
                placeholder="请输入"
               clearable
                maxlength="11"
                @input="
                        tableList.leaderPhone = tableList.leaderPhone.replace(
                          /[^\d]/g,
                          ''
                        )
                  "
           ></el-input>
     </el-form-item>

• 只支持输入正整数

      <el-form-item label="...." prop="registeredCapital">
                  <!-- 正整数 -->
                  <el-input
                    v-model="tableList.registeredCapital"
                    placeholder="........"
                    maxlength="10"
                    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                    clearable
                  ></el-input>
     </el-form-item>

• 实现校验并且为非必填项

dataRules: {
        // 负责人联系电话  非必填
        leaderPhone: [
          {
            required: false,
            trigger: "blur",
            validator: (r, v, b) => {
              v &&
              !/^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/.test(
                v
              )
                ? b("手机号格式不正确")
                : b();
            },
          },
        ],
        //  邮箱验证   非必填
        email: [
          {
            required: false,
            trigger: "blur",
            validator: (r, v, b) => {
              v &&
              !/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
                v
              )
                ? b("邮箱格式不正确")
                : b();
            },
          },
        ],
      },

复制就好拉 希望对大家有帮助