v1.0 禁止空白的项目

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>最简单验证：禁止空白项目</title>
      </head>
      <body>
        <form method="post" action="">
          账户：<input type="text" id="userId"><br>
          密码：<input type="password" id="password"><br>
          确认密码：<input type="password" id="passwordAgain"><br>
                   <input type="submit" value="注册" onclick="return eg.regCheck();">
        </form>
        <script>
          var eg = {};      //声明一个变量，作为命名空间使用🔥
          eg.$ = function(id){
            return document.getElementById(id);  
          };         //取得指定id的元素，将其封装成一个方法，提高代码复用率
          eg.regCheck = function(){
            var userId = eg.$("userId");
            var password = eg.$("password");
            var passwordAgain = eg.$("passwordAgain");
            if(userId.value == ''){
              alert("未填写账户！");
              return false;
            }
            else if(password.value == ''){
              alert("未填写密码！");
              return false;
            }
            else if(passwordAgain.value != password.value){
              alert("两次密码输入不一致！");
              return false;
            }
            return true;
          };
        </script>
      </body>
    </html>

🔥处使用的是“单全局变量”，这样可以减少“环境污染”不必担心冲突，利于维护

知道多一点：

除了上面这种把验证绑定在按钮标签的onclick属性上的方式，还可将验证绑定在表单标签的onsubmit属性上；
可以将js代码保存成.js文件或.html文件、.htm文件（DOS操作系统限制文件扩展名为3个字符）直接在浏览器中运行

v2.0 处理各种表单元素（还有待改善，代码中的“简介”字数限制不起作用）

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>添加简介、输入超过3次锁定注册按钮</title>
      </head>
      <body>
        <form method="post" action="">
                <input hidden id="errnum" value="0"/><br>
          账户：<input type="text" id="userId"/><br>
          密码：<input type="password" id="password"/><br>
          确认密码：<input type="password" id="passwordAgain"/><br>
          性别：<input type="radio" name="sex" value="1" checked="checked"/>男
               <input type="radio" name="sex" value="0"/>女<br>
          年龄：<select name="age" id="age">
                 <option value="0" selected="selected">请选择年龄段</option>
                 <option value="1">18岁以下</option>
                 <option value="2">18-24岁</option>
                 <option value="3">24-30岁</option>
                 <option value="4">30-35岁</option>
                 <option value="5">35岁以上</option> 
               </select><br>
          爱好：<input type="checkbox" name="like" value="1" class="like"/>
               上网<input type="checkbox" name="like" value="2" class="like"/>
               逛街<input type="checkbox" name="like" value="3" class="like"/>
               看电影<input type="checkbox" name="like" value="4" class="like"/>
               其他<br>
          简介：
               <div contenteditable="true" id="about"
                    style="width: 200px;
                            height:120px;max-height:120px;padding: 3px;outline: 0;border: 1px solid; 
                            font-size: 12px;word-wrap: break-word;-webkit-user-modify: read-write-plaintext-only;display:block;overflow:hidden"></div><br>
                   <input type="submit" value="注册（输错3次后锁定）" id="registerButton" onclick="return eg.regCheck();"><br>
                   <input type="button" value="解锁" onclick="eg.unlock()" style="display:none;" id="unlockButton">
        </form>
        <script>
          var eg = {};      //声明一个变量，作为命名空间使用
          eg.$ = function(id){
            return document.getElementById(id);  
          };         //取得指定id的元素，将其封装成一个方法，提高代码复用率
          //输入验证
          eg.regCheck = function(){
            var userId = eg.$("userId");
            var password = eg.$("password");
            var passwordAgain = eg.$("passwordAgain");
            var about = eg.$("about");
            var age = eg.$("age");
            var hobbies = document.getElementsByClassName("like");
            var hobbyNum = 0;
            if(userId.value == ""){
              alert("未填写账户！");
              eg.err();
              return false;
            }
            if(password.value == ""){
              alert("未填写密码！");
              eg.err();
              return false;
            }
            if(passwordAgain.value != password.value){
              alert("两次密码输入不一致！");
              eg.err();
              return false;
            }
            if(about.length > 60){
              alert("简介太长！");
              eg.err();
              return false;
            }
            if(age.value == "0"){
              alert("请选择年龄段！");
              eg.err();
              return false;
            }
            for(var i = 0;i < hobbies.length;i ++){
              if(hobbies[i].checked){
                hobbyNum ++;
              }
            }
            if(hobbyNum == 0){
              alert("请至少选择一个爱好！");
              eg.err();
              return false;
            }
            return true;
          };
          //记录出错次数
          eg.err = function(){
            var errnum = eg.$("errnum");
            var old = errnum.value;
            errnum.value = parseInt(old) + 1;
            eg.lockOrUnlock();
          }
          //判断是否锁定注册按钮
          eg.lockOrUnlock = function(){
            var errnum = eg.$("errnum");
            if(parseInt(errnum.value) > 2){
              eg.$("registerButton").disabled = true;      //disabled属性🔥
              eg.$("unlockButton").style.display = "block";
            }
          }
          //解锁
          eg.unlock = function(){
            eg.$("registerButton").disabled = false;
            eg.$("unlockButton").style.display = "none";
          }
        </script>
      </body>
    </html>

🔥属性disabled

v3.0 用正则来校验复杂的格式要求

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>校验邮箱</title>
      </head>
      <body>
        <form method="post" action="">
                <input hidden id="errnum" value="0"/><br>
          账户：<input type="text" id="userId"/><br>
          密码：<input type="password" id="password"/><br>
          确认密码：<input type="password" id="passwordAgain"/><br>
          性别：<input type="radio" name="sex" value="1" checked="checked"/>男
               <input type="radio" name="sex" value="0"/>女<br>
          年龄：<select name="age" id="age">
                 <option value="0" selected="selected">请选择年龄段</option>
                 <option value="1">18岁以下</option>
                 <option value="2">18-24岁</option>
                 <option value="3">24-30岁</option>
                 <option value="4">30-35岁</option>
                 <option value="5">35岁以上</option> 
               </select><br>
          爱好：<input type="checkbox" name="like" value="1" class="like"/>
               上网<input type="checkbox" name="like" value="2" class="like"/>
               逛街<input type="checkbox" name="like" value="3" class="like"/>
               看电影<input type="checkbox" name="like" value="4" class="like"/>
               其他<br>
          简介：
               <div contenteditable="true" id="about"
                    style="width: 200px;
                            height:120px;max-height:120px;padding: 3px;outline: 0;border: 1px solid; 
                            font-size: 12px;word-wrap: break-word;-webkit-user-modify: read-write-plaintext-only;display:block;overflow:hidden"></div><br>
          邮箱：<input type="email" id="email"><br>
                   <input type="submit" value="注册（输错3次后锁定）" id="registerButton" onclick="return eg.regCheck();"><br>
                   <input type="button" value="解锁" onclick="eg.unlock()" style="display:none;" id="unlockButton">
        </form>
        <script>
          var eg = {};      //声明一个变量，作为命名空间使用
          eg.$ = function(id){
            return document.getElementById(id);  
          };         //取得指定id的元素，将其封装成一个方法，提高代码复用率
          //输入验证
          eg.regCheck = function(){
            var userId = eg.$("userId");
            var password = eg.$("password");
            var passwordAgain = eg.$("passwordAgain");
            var about = eg.$("about");
            var age = eg.$("age");
            var hobbies = document.getElementsByClassName("like");
            var hobbyNum = 0;
            if(userId.value == ""){
              alert("未填写账户！");
              eg.err();
              return false;
            }
            if(password.value == ""){
              alert("未填写密码！");
              eg.err();
              return false;
            }
            if(passwordAgain.value != password.value){
              alert("两次密码输入不一致！");
              eg.err();
              return false;
            }
            if(about.length > 60){
              alert("简介太长！");
              eg.err();
              return false;
            }
            if(age.value == "0"){
              alert("请选择年龄段！");
              eg.err();
              return false;
            }
            for(var i = 0;i < hobbies.length;i ++){
              if(hobbies[i].checked){
                hobbyNum ++;
              }
            }
            if(hobbyNum == 0){
              alert("请至少选择一个爱好！");
              eg.err();
              return false;
            }
            //验证邮箱
            var email = eg.$("email");
            //这里使用RegExp对象创建正则表达式
            if(!new RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\d]+[a-z\\d\\-]*\.)+[a-z]{2,4}$","i").test(email.value)){
              alert("请输入正确的邮箱！");
              eg.err();
              return false;
            }
            return true;
          };
          //记录出错次数
          eg.err = function(){
            var errnum = eg.$("errnum");
            var old = errnum.value;
            errnum.value = parseInt(old) + 1;
            eg.lockOrUnlock();
          }
          //判断是否锁定注册按钮
          eg.lockOrUnlock = function(){
            var errnum = eg.$("errnum");
            if(parseInt(errnum.value) > 2){
              eg.$("registerButton").disabled = true;      //disabled属性
              eg.$("unlockButton").style.display = "block";
            }
          }
          //解锁
          eg.unlock = function(){
            eg.$("registerButton").disabled = false;
            eg.$("unlockButton").style.display = "none";
          }
        </script>
      </body>
    </html>

知道多一点：

正则表达式之父：斯蒂芬·科尔·克莱尼（Stephen Cole Kleene），正则表示法，或正则表达式，最早见于其1956年一篇论文中，利用成为正则集合的数学符号描述神经网事件模型，其递归论奠定了理论计算机科学的基础
后来，正则表达式被广泛应用到Unix或类Unxi工具中
只要是计算机编程语言，必然会有正则的身影
NoSQL数据库MongoDB使用正则搜索
正则表达式常见符号

v4.0 改善UE（User Experience，用户体验），这里只改善交互用户体验，视觉样式以后有时间再加

<!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>改善交互用户体验</title>
      </head>
      <style>
        #passwordStrength{display:inline-block;width:100px;height:5px;background:#c3c3c3}
        #passwordStrength i{display:block;background:green;height:5px;width:0px;}
      </style>
      <body>
        <form method="post" action="">
                <input hidden id="errnum" value="0"/><br>
          账户：<input type="text" id="userId"/><br>
          密码：<input type="password" id="password"/><br>
          确认密码：<input type="password" id="passwordAgain"/><br>
          密码强度：<span id="passwordStrength"><i id="passwordLV"></i></span><br>
          性别：<input type="radio" name="sex" value="1" checked="checked"/>男
               <input type="radio" name="sex" value="0"/>女<br>
          年龄：<select name="age" id="age">
                 <option value="0" selected="selected">请选择年龄段</option>
                 <option value="1">18岁以下</option>
                 <option value="2">18-24岁</option>
                 <option value="3">24-30岁</option>
                 <option value="4">30-35岁</option>
                 <option value="5">35岁以上</option> 
               </select><br>
          爱好：<input type="checkbox" name="like" value="1" class="like"/>
               上网<input type="checkbox" name="like" value="2" class="like"/>
               逛街<input type="checkbox" name="like" value="3" class="like"/>
               看电影<input type="checkbox" name="like" value="4" class="like"/>
               其他<br>
          简介：
               <div contenteditable="true" id="about"
                    style="width: 200px;
                            height:120px;max-height:120px;padding: 3px;outline: 0;border: 1px solid; 
                            font-size: 12px;word-wrap: break-word;-webkit-user-modify: read-write-plaintext-only;display:block;overflow:hidden"></div><br>
          邮箱：<input type="email" id="email"><br>
                   <input type="submit" value="注册（输错3次后锁定）" id="registerButton" onclick="return eg.regCheck();"><br>
                   <input type="button" value="解锁" onclick="eg.unlock()" style="display:none;" id="unlockButton">
        </form>
        <script>
          var eg = {};      //声明一个变量，作为命名空间使用
          eg.$ = function(id){
            return document.getElementById(id);  
          };         //取得指定id的元素，将其封装成一个方法，提高代码复用率
          //监听事件🔥
          eg.addListener = function(target,type,handler){
            if(target.addEventListener){
              target.addEventListener(type,handler,false);
            }
            else if(target.attachEvent){
              target.attachEvent("on"+type,handler,);
            }
            else{
              target["on"+type] = handler;
            }
          };
          //输入验证
          eg.regCheck = function(){
            var userId = eg.$("userId");
            var password = eg.$("password");
            var passwordAgain = eg.$("passwordAgain");
            var about = eg.$("about");
            var age = eg.$("age");
            var hobbies = document.getElementsByClassName("like");
            var hobbyNum = 0;
            if(userId.value == ""){
              alert("未填写账户！");
              userId.focus();
              eg.err();
              return false;
            }
            if(password.value == ""){
              alert("未填写密码！");
              password.focus();
              eg.err();
              return false;
            }
            if(passwordAgain.value != password.value){
              alert("两次密码输入不一致！");
              passwordAgain.focus();
              eg.err();
              return false;
            }
            if(about.length > 60){
              alert("简介太长！");
              about.focus();
              eg.err();
              return false;
            }
            if(age.value == "0"){
              alert("请选择年龄段！");
              age.focus();
              eg.err();
              return false;
            }
            for(var i = 0;i < hobbies.length;i ++){
              if(hobbies[i].checked){
                hobbyNum ++;
              }
            }
            if(hobbyNum == 0){
              alert("请至少选择一个爱好！");
              eg.err();
              return false;
            }
            //验证邮箱
            var email = eg.$("email");
            //这里使用RegExp对象创建正则表达式
            if(!new RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\d]+[a-z\\d\\-]*\.)+[a-z]{2,4}$","i").test(email.value)){
              alert("请输入正确的邮箱！");
              email.focus();
              eg.err();
              return false;
            }
            return true;
          };
          //添加交互事件
          eg.addEvent = function(){
            var password = eg.$("password");
            eg.addListener(password,"keyup",function(){
              var lv = 0;
              if(/^\d{4,}$/.test(password.value)){
                lv = 10;
              }
              else if(/^\w{4,}$/.test(password.value)){
                lv = 25;
              }
              else if(/^[\d\w]{4,}$/.test(password.value)){
                lv = 50;
              }
              else if(/^[\d\w~!@#$%\^&*\-{}\[\]=<>,\.\?\/]{4,}$/.test(password.value)){
                lv = 100;
              }
              else if(password.length < 6 && password.length > 3){
                lv = 60;
              }
              else if(password.length < 4){
                lv = 0;
              }
              eg.$("passwordLV").style.width = lv+"px";
            });
          }
          eg.addEvent();
          //记录出错次数
          eg.err = function(){
            var errnum = eg.$("errnum");
            var old = errnum.value;
            errnum.value = parseInt(old) + 1;
            eg.lockOrUnlock();
          }
          //判断是否锁定注册按钮
          eg.lockOrUnlock = function(){
            var errnum = eg.$("errnum");
            if(parseInt(errnum.value) > 2){
              eg.$("registerButton").disabled = true;      //disabled属性
              eg.$("unlockButton").style.display = "block";
            }
          }
          //解锁
          eg.unlock = function(){
            eg.$("registerButton").disabled = false;
            eg.$("unlockButton").style.display = "none";
          }
        </script>
      </body>
    </html>

🔥关于addEventListener、attachEvent

posted on 2021-09-23 10:13 KK的备忘录阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

v1.0 禁止空白的项目

v2.0 处理各种表单元素（还有待改善，代码中的“简介”字数限制不起作用）

v3.0 用正则来校验复杂的格式要求

v4.0 改善UE（User Experience，用户体验），这里只改善交互用户体验，视觉样式以后有时间再加

公告