2018-04-24前端验证账号密码是否输入/语言选择下拉菜单/

1. 验证账号密码是否输入

HTML
<button type="button" form="loginForm" id="btnlogin" onclick="dosubmit()"/> 登陆
先将登陆按钮的type从submit转为button
form属性绑定表单
因为submit类型会直接提交表单数据，改为button再加上onclick事件可以实现
JS部分

var login=$('#btnlogin');
var username=$("#username");
var psw=$("#psw");
var yanzheng=$("#yanzheng");
var correctYanzheng='heti';
function dosubmit () {
    if(username.val()==''){
        alert('请输入用户名');
    }else if(psw.val()==''){
        alert('请输入密码');
    }else if(yanzheng.val()==''){
        alert('请输入验证码');
    }else if(yanzheng.val()!=correctYanzheng){
        alert('验证码错误');
    }else{
        loginForm.submit();
    }
}

注意:jquery获取input的值是.val()而不是.value()

后台admin.js
先进行简单验证，账号密码正确了就渲染管理页，不正确会提示错误

router.post('/idVerify',function (req,res,next) {
    var username=req.body.username
    var password=req.body.password
    var yanzheng=req.body.yanzheng
    console.log('render(admin)'+username);
    if(username=='admin'&&password=='admin'){
        console.log('render(admin)'+username);
        res.render('admin');
    }else{
        res.render('login',{mes:'账号或者密码错误'});//传入错误的参数
    }
})

前端接受到参数，利用swig模板，将mes打印出来

<div id="log">
   {{mes}}
</div>

本地测试没有问题，但是上传到服务器又有问题了

实际上，重启服务器就没什么问题了

2. 首页语言选择下拉菜单，将功能实现了一下

HTML

<select name="lang"class="form-control"id="selLang">
    <option value="1">日语</option>
    <option value="2">韩语</option>
    <option value="3">西班牙语</option>                     
</select>

有两个div,一开始加班模块是隐藏的，只有查不到结果的时候才会显示

<!--歌曲列表-->
<div class="row" id="musicList">
    {% for val in datas %}
    <div class='col-md-3'>
        <a href='/api/play?hash={{val.Hash}}'>
            <img src='{{val.img}}'/>
            <p>{{val.songname}} - {{val.author}}</p>
        </a>
    </div>
    {% endfor %}
    </div>
    <div class="jiaban">
        此版块还在加班中。。。
    </div>
</div>

CSS

.jiaban{
    display: none;
    font-size:48px ;
    color: #C0C0C0;
    margin-top: 230px;
    text-align: center;
    padding: 20px;
}

JS

$('select#selLang').change(function(){
    switch ($(this).val()){
        case '1':
            console.log('1');
            alang('Jap');
                break;
        case '2':
            alang('Korean');
             break;
        case '3':
            console.log('3');
            alang('Spanish');
                 break;
        }
    })

    function alang (lang) {
        $.ajax({
            type:"get",
            url:"/",
            data:{lang:lang},
            success:function  (data) {
                if (data=='unfinish') {
                    $('#musicList').hide();
                    $('.jiaban').css('display','block');
                }else{
                    $('#musicList').show();
                    $('.jiaban').css('display','none');
                }
            }
        });

main.js

router.get('/',function (req,res,next) {
    var lang=req.query.lang||'Jap';//默认语言为日语
    User.find(
        {Status:{$lt:2},lang:lang}//<2
    ).then(function (info) {
        if(info.length!=0){
            res.render('index',{datas:info});
        }else{
            res.send('unfinish');
            console.log('不存在');
        }
    });
});

3. 完善了登陆时验证码功能

新增加了checkCode.js文件

主要有两个函数：
1.createCode()，创建验证码
2.validate(),验证验证码

var code ; //在全局定义验证码 
//产生验证码 
window.onload=function createCode(){ 
    code = ""; 
    var codeLength = 4;//验证码的长度 
    var checkCode = document.getElementById("code"); 
    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 
    'S','T','U','V','W','X','Y','Z');//随机数 
    for(var i = 0; i < codeLength; i++) {//循环操作 
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
        code += random[index];//根据索引取得随机数加到code上 
    } 
    checkCode.innerHTML = code;//把code值赋给验证码 
} 
//校验验证码 
function validate(){ 
    var inputCode = document.getElementById("yanzheng").value.toUpperCase(); //取得输入的验证码并转化为大写 
    if(inputCode.length <= 0) { //若输入的验证码长度为0 
        alert("请输入验证码！"); //则弹出请输入验证码 
    } else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
        alert("验证码输入错误！"); //则弹出验证码输入错误 
        createCode();//刷新验证码 
        document.getElementById("input").value = "";//清空文本框 
    } else { //输入正确时 
        return true; 
    } 
}

将login.html的js部分改成如下

var login=$('#btnlogin');
var username=$("#username");
var psw=$("#psw");
function dosubmit () {
    if(username.val()==''){
        alert('请输入用户名');
    }else if(psw.val()==''){
        alert('请输入密码');
    }else if(validate()){//验证码在输入无误时会返回true
        loginForm.submit();
    }
}