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

- 日理万妓 2022-12-08 01:34 142阅读 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 条评论，142人围观）

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

相关阅读

相关自定义组件

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

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

相关 vue引用自定义组件失败自定义组件名为map

将一个自定义组件定义为map以后页面不显示 import map from './map.vue' 下面使用组件模板中 components

谁借莪１个温暖的怀抱￠/ 2023年10月09日 14:12/ 0 赞/ 16 阅读

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

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

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

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

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

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

相关 vue自定义组件

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

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

相关 vue自定义组件

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

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

相关 Vue自定义组件

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

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

相关 jquery.validationEngine 自定义验证的使用方法

一：自定义验证规则 (1) 方法1 ，定义验证规则 $.validationEngineLanguage.allRules.name = {

秒速五厘米/ 2022年06月17日 10:50/ 0 赞/ 391 阅读

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

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

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

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

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

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