gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1442
阅读:50回复:0

el-input 限制输入内容,校验邮箱格式,校验email格式

楼主#
更多 发布于:2025-06-11 15:09


1.只能输入数字




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






2.只能输入数字和中英文

       value=value.replace(/[d]/g,'')   只输入数字或英文



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






3.校验邮箱格式




<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>




JS部分:

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('请输入合法的邮箱格式'))
}





data() {    
    return {
      form: {
        email: ''
      }, rules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
}
  },


https://blog.csdn.net/JRSQW/article/details/129202692?ops_request_misc=&request_id=&biz_id=102&utm_term=js%20el-input%20EMAIL%20%E6%A0%BC%E5%BC%8F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-129202692.142^v102^pc_search_result_base7&spm=1018.2226.3001.4187
游客


返回顶部