JavaScript正则改善表单的用户体验改善

最新推荐文章于 2025-04-05 00:23:28 发布

勤奋赛过天赋

最新推荐文章于 2025-04-05 00:23:28 发布

阅读量158

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：正则改善用户体验

本文链接：https://blog.youkuaiyun.com/qq_43328996/article/details/93671901

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文通过实例展示如何优化表单的用户体验，包括密码强度实时反馈、表单验证、错误提示及解锁机制等，旨在提升用户填写表单的便捷性和准确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单的用户体验改善

<!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"  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" select="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" cass="like"/>
      上网:<input type="checkbox" name="like" value="2" cass="like"/>
      逛街:<input type="checkbox" name="like" value="3" cass="like"/>
      看电影:<input type="checkbox" name="like" value="4" cass="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>
<script>
    var eg={};//声明一个对象，当做命名空间来使用，本书默认的范例都会以此来方便管理
    //定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
    eg.$=function(id){
        return document.getElementById(id);
    };
    eg.getElementsByClassName=function(className,element){
        if(document.getElementsByClassName){
            return (element||document).getElementsByClassName(className)
        }
        var children=(element||document).getElementsByTagName('*');
        var elements=new Array();
        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.$("userpwd");
        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(upwd.value!=upwd2.value){
            alert('两次密码输入不同!');
            upwd.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=document.getElementsByClassName("like");
        var likeNum=0;
        for(var n=0;n<likes.length;n++){
            if(likes[n].checked){
                likeNum++;
            }
        }
        if(likeNum==0){
            alert('请至少选择一个爱好！');
            eg.err();
            return false;
        }
        //邮箱验证
        var email=eg.$("email");
        if(!new  RegExp("^[a-z\\d]+[\\w\\-\.]*@([a-z\\d]+[a-z\\d\\-]*\.)+[a-z]{2,4}$","i").test(email.value)){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;      //返回true就会提交表单form
    };
        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;
                }
               else if(pwd.value.length<4){
                    lv=0;
                }
                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";
        //元素所有样式都挂载到style属性下
    }
</script>
</body>
</html>