表单校验 - 装饰器模式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名<input type="text" name="username" id="username">
        密码<input type="text" name="password" id="password">
        <button id="submit-btn" >提交</button>
    </form>
</body>
<script>
    Function.prototype.before = function(beforeFn){
       console.log(beforeFn)
       let _this = this;
       return function(){
           let ret = beforeFn.apply(this,arguments);
           console.log(ret)
           // 如果校验成功 提交表单
           if(ret)
             _this.apply(this,arguments);
       }
   }
 function submit(){
     alert('提交表单');
 }
 submit= submit.before(function(){
     let username = document.getElementById('username').value;
     if(username.length<6){
         return alert('用户名不能少于6位');
     }
     return true;
 });
 submit = submit.before(function(){
     let username = document.getElementById('username').value;
     if(!username){
         return alert('用户名不能为空');
     }
     return true;
 });


 document.getElementById('submit-btn').addEventListener('click',submit);
 </script>
</html>

 

posted @ 2021-03-04 22:06  1点  阅读(70)  评论(0)  编辑  收藏  举报