极简风登陆注册

来源：互联网发布：摩擦交友软件编辑：程序博客网时间：2024/05/14 19:06

开头说两句,因为刚开始工作不久,加入团队自接小项目里要做个登陆注册.网上找了个比较好看的ui模板,自己写了js逻辑代码,分享一下.至于我能想到大家会说的:网上不是有很多,干嘛还要自己写?重点在于练手,没有扎扎实实写点东西出来,对不住我自己.先上效果图,资源可以点击[1937abcd的github资源下载](https://github.com/1937abcd/SimpleLogReg)下载

注册框,登陆也是一样的

注册逻辑
js 文件位置: 1937abcd/ SimpleLogReg/logReg/regJs/regLogic.js
(1)因为是要考虑到邮箱格式注册,所以在处理这一块上费了不少功夫.
要判断出没有 @ 符号的时候, 底下邮箱提示模板实时更新; 出现了 @ 的时候则开始不更新.

以下是大致的逻辑处理, 可以下载源码分析, 注释本人详细列出

  /*-----------------监听 邮箱input--------------------*/  // 以下是设置模板样式的函数  function setLiSpanCSS(str_start){    $(".e_mailExample").html(str_start);    $(".e_mailExample li").css({}).click(function(e)    {       // 点击模板, 文本内容赋于 input 中       usernameInput.val(e.target.firstChild.textContent);    });    $(".e_mailExample li span").css({'height': '32px', 'line-height' : '32px'});}// 监听 邮箱 input 模板显示 与 隐藏usernameInput.focus(function()    //定焦 显示{// 提示模板在 focus 时候显示, blur 时候隐藏, 模板的格式需要在 js 中设置    e_mailExample.fadeIn();    e_mailExample.fadeIn("slow");    e_mailExample.fadeIn(1000);    // 模板显示, 加载 样式 + 内容    //监听 邮箱input 键盘弹起 (keyup) 事件, 时刻键入邮箱模板    for(var i = 0; i < e_mailExample_arr.length; i++)        {            str_start += "<li><span >" + usernameInput.val() + e_mailExample_arr[i] + "</span></li>";        }        setLiSpanCSS(str_start);    usernameInput.bind("propertychange input",function()    {}     });// 监听 邮箱input 失焦事件, 隐藏提示模板usernameInput.blur(function()    {});

(2)之后是密码以及确认密码区域的逻辑

/*-----------------监听 密码input--------------------*/// 设置 通过jquery加入 密码错误提示框  样式 + 内容function setPwdLiSpanCSS(str_start){    $(".pwd_error").html(str_start);    $(".pwd_error li").css({})    $(".pwd_error li span").css({});}// 判断输入密码格式这一功能可以封装成一个函数, 在表单失焦时候运行, 里面的逻辑因需求而定function judgeFormat(pwd){   if("格式正确")   {       return true   }else   {        return false    }}// 监听 密码 input 定焦事件,passwordInput.focus(function(){    pwd_error.fadeIn();    pwd_error.fadeIn("slow");    pwd_error.fadeIn(1000);    // 监听 密码 input 事件, 时刻改变 时刻判断键入值    passwordInput.bind("propertychange input",function()    {        pwd = passwordInput.val();        if("pwd.length 格式正确")        {             var error_text = "<li><span style='color:#761c19;'>格式正确</span></li>";             setPwdLiSpanCSS(error_text);         }else         {            var error_text = "<li><span style='color:#761c19;'>格式错误</span></li>";             setPwdLiSpanCSS(error_text);         }});// 监听 密码 input 失焦事件,  判断键入值是否格式正确, 应否存储?passwordInput.blur(function(){    if(judgeFormat(passwordInput.val()))    {        pwdStorage = passwordInput.val();        pwd_error.fadeOut();        pwd_error.fadeOut("slow");        pwd_error.fadeOut(500);    }else    {        pwdStorage = null;        var error_text = "<li><span style='color:darkred;'>格式错误, 不能进行注册!</span></li>";        setPwdLiSpanCSS(error_text);    }});

(3)确认密码

/*-----------------监听 确认密码input--------------------*/// 设置 通过jquery加入 确认密码错误模板的 ul 中的 li 和 span 样式function setrePwdLiSpanCSS(str_start){}// 确认密码定焦 弹出提示框repasswordInput.focus(function(){});// 确认密码失焦 就存储他的信息进行判断repasswordInput.blur(function(){});

以上是注册框的用户、密码、确认密码 3 点的主要逻辑, 需要注意的是, 这里并不是全部的代码, 考虑到篇幅长度以及文档的可读性, 所以精简的部分代码, 有兴趣的可以移步前往github 下载分析: https://github.com/1937abcd/SimpleLogReg

2 登陆逻辑
js 文件位置: 1937abcd/ SimpleLogReg/logReg/logJs/logLogic.js
相对于注册逻辑来说, 登陆逻辑只需要注重登陆用户input 这一块, 而且他的提示模板也可以移花接木, 从注册逻辑 js 复制过来.

/** * Created by Sun on 2017/3/31. */var logUsernameInput = $(".username");var logPwdInput = $(".password");var logCheckInput = $(".Captcha");var logBut = $(".submit_button");var e_mailExample = $(".e_mailExample");var e_mailExample_arr = ["@qq.com", "@163.com", "@sina.cn", "@sina.com", "@139.com"];var isFirstPra = 0;   // 用来标识 是否 input 中第一次出现 @ 符号, 如果删除了第一次输入 @, 则重置为 0var logUnameStorage = logPwdStorage = null;logUsernameInput.val(null);      // 每次刷新使 input 重新为空logPwdInput.val(null);logCheckInput.val(null);/*-----------------监听 邮箱input--------------------*/// 设置 通过jquery加入 邮箱模板的 ul 中的 li 和 span 样式function setLiSpanCSS(str_start){    $(".e_mailExample").html(str_start);    $(".e_mailExample li").css    ({        'cursor':'pointer', 'height': '32px', 'width': '360px','text-align':'left',        'line-height': '32px', 'margin-left': '0px','border-bottom':'solid 1px rgba(255,255,255,.15)',        'padding': '0 15px','color': '#fff'    }).click(function(e)    {        logUsernameInput.val(e.target.firstChild.textContent);    });    $(".e_mailExample li span").css({'height': '32px', 'line-height' : '32px'});}// 监听 邮箱 input 模板显示 与 隐藏logUsernameInput.focus(function()    //定焦 显示{    e_mailExample.fadeIn();    e_mailExample.fadeIn("slow");    e_mailExample.fadeIn(1000);    var str_start = "";    if(logUsernameInput.val().indexOf("@") == -1)      // 当 input 值中没有 @ 的时候    {        for(var i = 0; i < e_mailExample_arr.length; i++)        {            str_start += "<li><span >" + logUsernameInput.val() + e_mailExample_arr[i] + "</span></li>";        }        setLiSpanCSS(str_start);        isFirstPra = 0;       //删除了第一次输入 @, 则重置为 0    }else      // 当 input 值中首次出现 @ 的时候    {        isFirstPra++;        if(isFirstPra >= 1)        {            if(isFirstPra == 1)            {                replaceUnameVal = logUsernameInput.val().substring(0, logUsernameInput.val().indexOf("@"));            }            for(var i = 0; i < e_mailExample_arr.length; i++)            {                str_start += "<li><span>" + replaceUnameVal + e_mailExample_arr[i] + "</span></li>";            }        }        setLiSpanCSS(str_start);    }    $(".e_mailExample li").click(function(e)    {        if(logUsernameInput.val().indexOf("@") == -1)        {            logUsernameInput.val(e.target.firstChild.textContent);            isFirstPra = 0;        }else        {            isFirstPra++;            if(isFirstPra >= 1)            {                if(isFirstPra == 1)                {                    replaceUnameVal = logUsernameInput.val().substring(0, logUsernameInput.val().indexOf("@"));                }                for(var i = 0; i < e_mailExample_arr.length; i++)                {                    $(".e_mailExample li").eq(i).html( replaceUnameVal + e_mailExample_arr[i]);                }            }        }    });    //监听 邮箱input 键盘弹起 (keyup) 事件, 时刻键入邮箱模板    logUsernameInput.bind("propertychange input",function()    {        if(logUsernameInput.val().indexOf("@") == -1)      //没有输入 @ 的时候        {            for(var i = 0; i < e_mailExample_arr.length; i++)            {                $(".e_mailExample li").eq(i).html(logUsernameInput.val() + e_mailExample_arr[i]);            }            isFirstPra = 0;               //删除了第一次输入的 @, 则重置为 0        }else                             //输入了 @ 的时候        {            isFirstPra++;            if(isFirstPra >= 1)            {                if(isFirstPra == 1)                {                    //replaceUnameVal = usernameInput.val().replace(/\@/, "");                    replaceUnameVal = logUsernameInput.val().substring(0, logUsernameInput.val().indexOf("@"));                }                for(var i = 0; i < e_mailExample_arr.length; i++)                {                    $(".e_mailExample li").eq(i).html( replaceUnameVal + e_mailExample_arr[i]);                }            }        }    });});logUsernameInput.blur(function()    // 失焦 隐藏{    e_mailExample.fadeOut();    e_mailExample.fadeOut("slow");    e_mailExample.fadeOut(500);});/*-------监听 按钮点击事件-------*/logBut.click(function(){    if(logUsernameInput.val().indexOf("@") != -1)    // 邮箱 input 值包含 @ 则存储    {        logUnameStorage = logUsernameInput.val();    }else    {        logUnameStorage = null;    }    if(logPwdInput.val() != null)    {        logPwdStorage = logPwdInput.val();    }else    {        logPwdStorage = null    }    console.log(logUnameStorage+"用户名");    console.log(logPwdStorage+"密码")});

整个文档就是这样了, 至于整体的界面设计, 是依据原来的模板, 进一步自己加工完成的. 如果本人小小的分享能给予你一些帮助, 不要吝啬你的关注哦.(如若转载, 请注明出处, 谢谢).

0 0