使用代理完成自定义验证组件

- 日理万妓 2022-12-08 01:34 145阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> 
        .error{
            border:1px solid red;
        }
        </style>
    </head>
    
    <body>
        <input type="text"  validate  rule="max:12,min:3">
        <input type="text"  validate  rule="max:3,isNumber">
    </body>
    
    </html>
    <script>
        class Validate{
            max(value,len){
              return value.length<=len;
            }
            min(value,len){
              return value.length>=len;
            }
            isNumber(value){
                return /^\d+$/.test(value)
            }
        }
        // let validate=new Validate();
        // console.log(validate.isNumber(123,5))
       function ProxyFactory(target){ 
           return new Proxy(target,{
               set(target,key,el){ 
                  const rule=el.getAttribute('rule');
                  const validate=new Validate();
                  let state=rule.split(',').every((item)=>{
                      let info=item.split(':');
                    return validate[info[0]](el.value,info[1])
                  })
                  console.log(state)
                  el.classList[state?'remove':'add']('error');
                  return true
               },
               get(target,key){
                   return target[key]
               }
           })
       }
       let proxy=ProxyFactory(document.querySelectorAll(`[validate]`));
       console.log(proxy)
       proxy.forEach((item,i)=>{
        item.addEventListener('keyup',function(){
            proxy[i]=this;
        })
       })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，145人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义组件

自定义组件 1、组件的创建与引用 1.1、创建组件在项目的根目录中，鼠标右键，创建 components -> test 文件夹。在新建的 c

深碍√TFBOYSˉ_/ 2024年03月24日 15:44/ 0 赞/ 112 阅读

相关前端——自定义组件

目录一、创作纪念日——6月7日（机缘巧合）二、收获三、前端组件 3.1、重要的CSS 3.2、实用组件 1、站点访问次数 2、鼠标样式 3、烟花点

ゝ一世哀愁。/ 2024年03月16日 17:43/ 0 赞/ 15 阅读

相关构建自定义 React 自动完成搜索组件

在本教程中，我们将构建一个 React 自动完成搜索组件，在用户键入搜索查询时提供建议。React 中有许多库提供自动完成功能，但我们将从头开始创建自定义组件。让我们开始使

﹏ヽ暗。殇╰゛Y/ 2023年10月11日 22:18/ 0 赞/ 11 阅读

相关小程序自定义组件使用详解

之前写过怎么使用小程序的组件，Weui，今天总结一下，怎么使用自定义组件，以 select 下拉框为例 ![20200708101159902.png][] 首先，自定义组

我就是我/ 2023年02月24日 03:44/ 0 赞/ 49 阅读

相关使用代理完成自定义验证组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

- 日理万妓/ 2022年12月08日 01:34/ 0 赞/ 146 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 310 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 299 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 311 阅读

相关 Vue 自定义组件使用v-model

正常的业务需求中，我们需要封装一些常用的组件。现在有一个最简单的需求，封装一个有特定样式的input框，够简单吧？好，我们来这样封装：字符串模板文件命名为 CInput

╰+攻爆jí腚メ/ 2022年06月12日 08:16/ 0 赞/ 425 阅读

相关 Android使用aar封装自定义组件

在Android开发的时候,有时候我们需要封装自定义组件,并且希望将封装好的自定义组件到处为一个lib库,实现给其他程序使用的效果,而传统的Jar包并不能很好的实现这个需求,因

分手后的思念是犯贱/ 2022年03月27日 14:06/ 0 赞/ 555 阅读