JavaScript表单输入合法控制

• 写在前面

为了提高数据输入的容错性和数据库数据的安全性，除了后端对输入的数据的逻辑判断处理，还可以前端页面高效率处理，从而提高系统的可靠性，下面是这次项目中的自己写的一些符合当时需要的控制。

• 账号位数和非空的判断控制

//登陆密码输入控制：非空
//账号 必须五位
function sLoginPwCtrl(obj){
    
    var sloginPw = document.getElementById("SuppwCtrl").value;//获得密码输入框中的值
    var superAcc = document.getElementById("SupAccCtrl").value;//获得账号输入框中的值
    
    //情况1，用户不输入账号，那么让提交按钮失效并返回一个提示到lable标签
    if( superAcc == null || superAcc == "" || superAcc == undefined ){
        document.getElementById('sloginSub').disabled = true;
        document.getElementById('sloginlable1').innerHTML = "请输入账户";
        sLoginPwCtrl(this);
    } 
    //情况2，用户输入账号位数步符合要求，那么让提交按钮失效并返回一个提示到lable标签
    else if( superAcc.length != 5 ){
        document.getElementById('sloginSub').disabled = true;
        document.getElementById('sloginlable1').innerHTML = "账户非法";
        sLoginPwCtrl(this);
    }
    //情况3，用户输入步输入密码，那么让提交按钮失效并返回一个提示到lable标签
    else if( sloginPw == null || sloginPw == "" || sloginPw == undefined ){
        document.getElementById('sloginSub').disabled = true;
        document.getElementById('sloginlable2').innerHTML = "请输入密码";
        sLoginPwCtrl(this);
    }
    //排除不合法操作后的其他操作，按钮有效，并清其操作留下的提醒
    else{
        document.getElementById('sloginSub').disabled = false;
        document.getElementById('sloginlable').innerHTML = "";
    }
    
}

• 仅仅能输入8位数字的输入控制

<!--仅仅能输入8位数字的输入控制-->
function check(obj){
    var maxChars = 8;
    if(isNaN(obj.value)){
        document.getElementById('kahaolable').innerHTML = "*卡号只能是数字";
        document.getElementById('sub').disabled = true;
    }
    else if(obj.value.length != maxChars){
        document.getElementById('kahaolable').innerHTML = "*卡号应为8位数字";
        document.getElementById('sub').disabled = true;
    }
    else{
        document.getElementById('sub').disabled = false;
         document.getElementById('kahaolable').innerHTML = "";
         var inputValue = document.getElementById("demo1").value;
         obj.value = inputValue;
    }
} 

 

• 修改密码输入控制

//修改密码控制
function upPswIn(obj){
    
    var myvalue1 = document.getElementById("upYuan").value;
    var myvalue2 = document.getElementById("upNew1").value;
    var myvalue3 = document.getElementById("upNew2").value;
    
    if( myvalue1 == null || myvalue1 == "" ){
        document.getElementById('upPwSub').disabled = true;
        document.getElementById('upLable1').innerHTML = "请正确输入原密码";
        upPswIn(this);
    }
    else if( myvalue2 == null || myvalue2 == "" || myvalue2 == undefined ){
        document.getElementById('upPwSub').disabled = true;
        document.getElementById('upLable1').innerHTML = "";
        document.getElementById('upLable2').innerHTML = "请输入新密码";
        upPswIn(this)
    }
    else if( myvalue3 == null || myvalue3 == "" || myvalue3 == undefined ){
        document.getElementById('upPwSub').disabled = true;
        document.getElementById('upLable1').innerHTML = "";
        document.getElementById('upLable2').innerHTML = "";
        document.getElementById('upLable3').innerHTML = "请再次输入新密码";
        upPswIn(this)
    }
    else 
    if( myvalue2 != myvalue3){
        document.getElementById('upPwSub').disabled = true;
        document.getElementById('upLable2').innerHTML = "两次密码不一致";
        upPswIn(this)
    }
    else{
        document.getElementById('upPwSub').disabled = false;
        document.getElementById('upLable1').innerHTML = "";
        document.getElementById('upLable2').innerHTML = "";
        document.getElementById('upLable3').innerHTML = "";
    }
    
}

 

简单总结

1. 其实原理都一样，都简单，但是需要很好的逻辑分析，分析各种可能的情况；
2. 在前端需要使用这些事件的地方，合理的使用事件，能让效果更好，事件分析的不对的化可能js函数写对了，事件也不一定能按照预想的效果触发，所以，函数里情况的分析，使用时事件的分析，非常重要！