• 写在前面

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

  • 账号位数和非空的判断控制
 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函数写对了,事件也不一定能按照预想的效果触发,所以,函数里情况的分析,使用时事件的分析,非常重要!

最新文章

  1. Safari 下用 &quot;location.href = filePath&quot; 实现下载功能的诡异 bug
  2. linux shell脚本通过参数名传递参数值
  3. Identifier &#39;Logic.DomainObjectBase._isNew&#39; is not CLS-compliant
  4. android显示当前时间
  5. [HTML/CSS]display:none和visibility:hidden的区别
  6. zoj 3823 Excavator Contest 构造
  7. XDubg的配置与应用
  8. uva 10036 Problem C: Divisibility
  9. 我看TDD测试驱动开发
  10. IntelliJ IDEA如何激活?
  11. 自己动手造拖拉机轮子系列 -(react-loadable)
  12. C/C++经典面试题一
  13. Minidump文件分析
  14. js与jQuery差别
  15. js实现jquery函数animate动画效果
  16. 让cxGrid像Excel那样高亮显示选区的行号列标
  17. 使用外部属性文件配置Bean以及Bean的生命周期方法
  18. 【洛谷P4556】 雨天的尾巴
  19. linux内核——进程切换宏switch_to
  20. 安装伪分布式hbase 0.99.0

热门文章

  1. js函数和封装
  2. ubuntu下安装teamiewer
  3. React事件处理、收集表单数据、高阶函数
  4. Linux系统的高级网络配置(bond、team、网桥)
  5. 快速构建CLI程序并发布到PyPi
  6. python tif转jpg
  7. openwrt开发笔记一:源码下载与编译
  8. Linux - last 命令(Mac 电脑)
  9. java 集合特性面试必备
  10. Golang入门学习(三):函数