手把手教你JavaScript-简单的页面输入控制

1.姓名只能是汉字

var nameCheck =/^[\u4e00-\u9fa5]{2,21}$/;
if(!nameCheck .test(name)){ 
    alert("输入的'姓名'中含有非汉字字符!"); 
    return false; 
         }

2.简单的身份证校验（校验内容包括数字，位数，以及末尾的x,X）

var idNoCheck = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(!idNoCheck .test(idNo)){ 
    alert("输入的'身份证号码'不合法!"); 
    return false; 
        }

3.简单的手机号码校验（号码第二位可以参考运营商定义的号段）

var phoneNoCheck = /^(1[0-9]{10})$/;
if(!phoneNoCheck .test(phoneNo )){
    alert("输入的'手机号码'不合法!");
    return false;
        }

4.简单的地址防特殊字符校验

var specialKey = "[`·~!$^&*()=|{}':;'\\[\\].<>/?~！￥……&*（）——|{}【】‘；：”“'。、？]‘'";//去掉#和，
for(var i = 0; i < specialKey.length; i++) {
    if(address.indexOf(specialKey[i]) != -1){
        alert("输入的'地址'含有非法字符!");
        return false;
           }
       }

5.特殊键位禁止输入

function checkKeys() {
        if (( event.keyCode > 32 && event.keyCode < 48) ||
            ( event.keyCode > 57 && event.keyCode < 65) ||
            ( event.keyCode > 90 && event.keyCode < 97)
           ) {
                event.returnValue = false;
           }  
    }

6.文本域长度简单控制

<td>
   <textarea cols="25" rows="5" name="AA" id="AA" onpropertychange="if(value.length>100) value=value.substr(0,100)" >BB</textarea>
</td>

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

//登陆密码输入控制：非空
//账号 必须五位
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位数字的输入控制

<!--仅仅能输入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;
    }
}

9.修改密码输入控制

//修改密码控制
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 = "";
    }  
}

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：866109386.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。

手把手教你JavaScript-简单的页面输入控制

猜你喜欢