JavaScript表单输入合法控制

• 写在前面

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

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

 1 //登陆密码输入控制：非空
 2 //账号 必须五位
 3 function sLoginPwCtrl(obj){
 4
 5     var sloginPw = document.getElementById("SuppwCtrl").value;//获得密码输入框中的值
 6     var superAcc = document.getElementById("SupAccCtrl").value;//获得账号输入框中的值
 7
 8     //情况1，用户不输入账号，那么让提交按钮失效并返回一个提示到lable标签
 9     if( superAcc == null || superAcc == "" || superAcc == undefined ){
10         document.getElementById('sloginSub').disabled = true;
11         document.getElementById('sloginlable1').innerHTML = "请输入账户";
12         sLoginPwCtrl(this);
13     }
14     //情况2，用户输入账号位数步符合要求，那么让提交按钮失效并返回一个提示到lable标签
15     else if( superAcc.length != 5 ){
16         document.getElementById('sloginSub').disabled = true;
17         document.getElementById('sloginlable1').innerHTML = "账户非法";
18         sLoginPwCtrl(this);
19     }
20     //情况3，用户输入步输入密码，那么让提交按钮失效并返回一个提示到lable标签
21     else if( sloginPw == null || sloginPw == "" || sloginPw == undefined ){
22         document.getElementById('sloginSub').disabled = true;
23         document.getElementById('sloginlable2').innerHTML = "请输入密码";
24         sLoginPwCtrl(this);
25     }
26     //排除不合法操作后的其他操作，按钮有效，并清其操作留下的提醒
27     else{
28         document.getElementById('sloginSub').disabled = false;
29         document.getElementById('sloginlable').innerHTML = "";
30     }
31
32 }

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

 1 <!--仅仅能输入8位数字的输入控制-->
 2 function check(obj){
 3     var maxChars = 8;
 4     if(isNaN(obj.value)){
 5         document.getElementById('kahaolable').innerHTML = "*卡号只能是数字";
 6         document.getElementById('sub').disabled = true;
 7     }
 8     else if(obj.value.length != maxChars){
 9         document.getElementById('kahaolable').innerHTML = "*卡号应为8位数字";
10         document.getElementById('sub').disabled = true;
11     }
12     else{
13         document.getElementById('sub').disabled = false;
14          document.getElementById('kahaolable').innerHTML = "";
15          var inputValue = document.getElementById("demo1").value;
16          obj.value = inputValue;
17     }
18 } 

• 修改密码输入控制

 1 //修改密码控制
 2 function upPswIn(obj){
 3
 4     var myvalue1 = document.getElementById("upYuan").value;
 5     var myvalue2 = document.getElementById("upNew1").value;
 6     var myvalue3 = document.getElementById("upNew2").value;
 7
 8     if( myvalue1 == null || myvalue1 == "" ){
 9         document.getElementById('upPwSub').disabled = true;
10         document.getElementById('upLable1').innerHTML = "请正确输入原密码";
11         upPswIn(this);
12     }
13     else if( myvalue2 == null || myvalue2 == "" || myvalue2 == undefined ){
14         document.getElementById('upPwSub').disabled = true;
15         document.getElementById('upLable1').innerHTML = "";
16         document.getElementById('upLable2').innerHTML = "请输入新密码";
17         upPswIn(this)
18     }
19     else if( myvalue3 == null || myvalue3 == "" || myvalue3 == undefined ){
20         document.getElementById('upPwSub').disabled = true;
21         document.getElementById('upLable1').innerHTML = "";
22         document.getElementById('upLable2').innerHTML = "";
23         document.getElementById('upLable3').innerHTML = "请再次输入新密码";
24         upPswIn(this)
25     }
26     else
27     if( myvalue2 != myvalue3){
28         document.getElementById('upPwSub').disabled = true;
29         document.getElementById('upLable2').innerHTML = "两次密码不一致";
30         upPswIn(this)
31     }
32     else{
33         document.getElementById('upPwSub').disabled = false;
34         document.getElementById('upLable1').innerHTML = "";
35         document.getElementById('upLable2').innerHTML = "";
36         document.getElementById('upLable3').innerHTML = "";
37     }
38
39 }

简单总结

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