极简风登陆注册

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

1. 注册逻辑
   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 中第一次出现 @ 符号, 如果删除了第一次输入 @, 则重置为 0
var 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+"密码")
});

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

.