html form表单验证和用户体验代码

来源：互联网发布：安卓博洋软件编辑：程序博客网时间：2024/06/07 02:09
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>改善用户体验的表单</title>    <style>        #pwdLvSpan{display: inline-block;                    width:100px;                    height: 5px;                    background: #c3c3c3;        }        #pwdLvSpan i{            display: block;            background: green;            height:5px;            width:0;        }    </style></head><body>    <form method="post" action="/test/" onsubmit="return eg.regCheck();">        <input type="hidden" name="" id="errnum" value="0"/>        账户：<input type="text" name="" id="userid" /><br/><br/>        密码：<input type="password" name="" id="userpwd" />        密码强度<span id="pwdLvSpan"><i id="pwdLv"></i></span><br/><br/>        确认: <input type="password" name="" id="userpwd2" /><br/><br/>        性别：<input type="radio" name="sex" value="1"  checked="checked"/>        男<input type="radio" name="sex" value="0" />女<br/><br/>        年龄：<select name="" 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/><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/><br/>        简介：<textarea name="" rows="4" cols="18" id="about"></textarea><br/><br/>        邮箱: <input type="text" name="" id="email" /> <br/><br/>        <input type="submit" value="注册" id="regBtn">        <input type="button" value="解锁" onclick="eg.unlock();" style="display: none;" id="regUnlock" />    </form></body><script>    // 表单验证    var eg = {};    // 申明一个对象当作命名空间使用    // 定义一个公共函数获取id元素 减少代码量 提高复用率    eg.$ = function (id) {        return document.getElementById(id);    };    // 定义一个公共函数来获取制定class的名称元素集合，能兼容各浏览器    eg.getElementsByClassName = function (className, element) {      if (document.getElementsByClassName){          return (element || document).getElementsByClassName(className)      }      var children = (element || document).getElementsByTagName('*');      var elements = [];      for (var i =0; i <children.length; i++){          var child = children[i];          var classNames = child.className.split(' ');          for (var j=0; j < classNames.length; j++){              if (classNames[j] == className){                  elements.push(child);                  break;              }          }      }      return elements;    };    // 定义一个公共函数解决监听事件兼容问题    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 uid = eg.$("userid");        var upwd = eg.$("userid");        var upwd2 = eg.$("userpwd2");        if (uid.value == ''){            alert("账户不能为空");            uid.focus();            eg.err();            return false;        }        if (upwd.value == ''){            alert("密码不能为空");            upwd.focus();            eg.err();            return false;        }        if (upwd2.value == ''){            alert("两次密码输入不同");            upwd2.focus();            eg.err();            return false;        }        // 简介长度        var about = eg.$("about");        if (about.value.length>60){            alert("简介太长！");            about.focus();            eg.err();            return false;        }        // 选择年龄段        var age =eg.$("age");        if(age.value == "0"){            alert("请选择年龄段！");            age.focus(); //让输入框获得焦点            eg.err();            return false;        }        var likes = eg.getElementsByClassName("like");        var likeNum = 0;        for (var n=0;n<likes.length;n++){            console.log(likes[n].checked);            if (likes[n].checked){                likeNum++;            }        }        if(likeNum==0){            alert("请至少选择一个爱好！");            eg.err();            return false        }        // 邮箱验证        var email = eg.$("email");        if(!/^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d]\-]*\.)+[A-Za-z]{2,4}$/.test(email.value)){            alert("请输入正确的邮箱!");            email.focus();            eg.err();            return false;        }        return true;    };    //添加一些交互事件    eg.addEvent = function () {        var pwd = eg.$("userpwd");        eg.addListener(pwd, "keyup", function () {            var lv = 0;            if (/^\d{4,}$/.test(pwd.value)) {                lv = 10;            } else if (/^\w{4,}$/.test(pwd.value)) {                lv = 25;            } else if (/^\d\w{4,}$/.test(pwd.value)) {                lv = 50;            } else if (/^[\d\w~!@#$%\^&*\(\)\-{}\[\]=<>,\.\?\/]{4,}$/.test(pwd.value)) {                lv = 100;            } else if (pwd.value.length < 6 && pwd.value.length > 3) {                lv = 60;            }            eg.$("pwdLv").style.width = lv + "px";        });    };        eg.addEvent();    // 出错时记录错误次数    eg.err = function () {        var el = eg.$("errnum");        var old = el.value;        el.value = parseInt(old)+1;        eg.lock();    };    eg.lock = function () {        var err = eg.$("errnum");        if (parseInt(err.value) >2 ){            eg.$("regBtn").disabled =true;            eg.$("regUnlock").style.display="block";        }    };    // 解锁    eg.unlock = function () {        eg.$("regBtn").disabled = false;        eg.$("regUnlock").style.display = "none";    }</script></html>
阅读全文
1 0