JavaScript表单输入合法控制
2024-09-21 10:10:33
写在前面
为了提高数据输入的容错性和数据库数据的安全性,除了后端对输入的数据的逻辑判断处理,还可以前端页面高效率处理,从而提高系统的可靠性,下面是这次项目中的自己写的一些符合当时需要的控制。
- 账号位数和非空的判断控制
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 }
简单总结
- 其实原理都一样,都简单,但是需要很好的逻辑分析,分析各种可能的情况;
- 在前端需要使用这些事件的地方,合理的使用事件,能让效果更好,事件分析的不对的化可能js函数写对了,事件也不一定能按照预想的效果触发,所以,函数里情况的分析,使用时事件的分析,非常重要!
最新文章
- Safari 下用 ";location.href = filePath"; 实现下载功能的诡异 bug
- linux shell脚本通过参数名传递参数值
- Identifier &#39;Logic.DomainObjectBase._isNew&#39; is not CLS-compliant
- android显示当前时间
- [HTML/CSS]display:none和visibility:hidden的区别
- zoj 3823 Excavator Contest 构造
- XDubg的配置与应用
- uva 10036 Problem C: Divisibility
- 我看TDD测试驱动开发
- IntelliJ IDEA如何激活?
- 自己动手造拖拉机轮子系列 -(react-loadable)
- C/C++经典面试题一
- Minidump文件分析
- js与jQuery差别
- js实现jquery函数animate动画效果
- 让cxGrid像Excel那样高亮显示选区的行号列标
- 使用外部属性文件配置Bean以及Bean的生命周期方法
- 【洛谷P4556】 雨天的尾巴
- linux内核——进程切换宏switch_to
- 安装伪分布式hbase 0.99.0