el-input 输入内容限制汇总(数字、数字+中英文),且限制内容长度

只能输入数字

<el-input
      v-model.trim="work"  // 不允许出现空格
      oninput="value=value.replace(/[^\d]/g,'')"  // 限制输入内容方法
      maxlength="20"   // 限制长度方法
      show-word-limit   // 展示数字统计
/>

只能输入数字和中英文

<el-input
      v-model.trim="work"   // 不允许出现空格
      oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')"  // 限制输入内容方法
      maxlength="20"  // 限制长度方法
      show-word-limit   // 展示数字统计
/>

校验邮箱格式

第一步:
<el-form-item label="邮箱" prop="email"> // prop绑定参数
        <el-input
          class="formInput"
          v-model.trim="form.email"
          placeholder="请输入邮箱"
          @input="formInput($event, 'email')"
        ></el-input>
      </el-form-item>


第二步:
data() {
    var checkEmail = (rule, value, callback) => {
      const regEmail =
        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的邮箱格式'))
    }
    return {
      form: {
        email: ''
      },
      rules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    }
  },
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容