js前端问题，求助各路大神，真心感谢！急

图片说明

条件：手动输入中间的4位手机号如果和后台取的值相同可以提交，如果不填或者填错就提交不了。

<!DOCTYPE html>

< head>
< script src="http://libs.baidu.com/jquery/2.0.0/jquery.js">
< style>
input{
width: 20px;
}
.btn{
clear:both;width:100px;height:30px;background: #c0b7b0;border-radius: 3px;color:#F0F0F0;
text-align: center;line-height: 30px;
}
< /style>
< /head>
< body>
< div style="float:left;">
< span id="spMobileHeader">
< /div>
< div style="float:left;">
< input type="text" maxlength="1" onkeyup="changefocus(1);">
< input type="text" maxlength="1" onkeyup="changefocus(2);">
< input type="text" maxlength="1" onkeyup="changefocus(3);">
< input type="text" maxlength="1" onkeyup="checkMobile();">
< /div>
< div style="float:left;">
< span id="spMobileEnd">
< /div>
< div id="testBtn" class="btn">提交
< /body>
< script type="text/javascript">
$(function (){
var mobile="12345678911"; //这是后台传过来的,我写死的,你拿到后自己变掉就可以了
$("#spMobileHeader").text(mobile.substring(0,4)); //显示前4个
$("#spMobileEnd").text(mobile.substring(8,11)); //显示后3个
});

$("input").keyup(function(e){
//退格键
if(e.keyCode==8){
$(this).focus();
}
})
< /script>
< /html>

在第二行加个html 就好了,吗蛋, 个人还是不建议在这进行比较的,因为不安全

用过ajax从后台把电话号传到前台...然后对比一下就行

用indexOf应该可以

意思就是和验证用户名是否注册似的那种？

后端传过来的数据应该就只有前三位，后四位。
中间的四个空格就是一个表单（每个小格子就是一个input（限制为type=number）,length=1每次点击事件触发时，下一个兄弟元素获取焦点，（如果keyCode是backspace的话，就不执行这个，执行删除元素）），
最后就是提交给后台，根据后台返回的数据判断是不是对的。

    <!--这里获取什么的和提交后的就不多说了-->
        <style>input{width: 20px;}</style>
        <form action="" method="post">
            <!--做一下输入限制，相当于表单验证-->
            <input type="text" maxlength="1" pattern="[\d{1}]"/>
            <input type="text" maxlength="1" pattern="[\d{1}]"/>
            <input type="text" maxlength="1" pattern="[\d{1}]"/>
            <input type="text" maxlength="1" pattern="[\d{1}]"/>
            <button type="submit">sumbit</button>
        </form>
        <script>
        $('input:text').keyup(function(e){
//          如果按的不是删除而且是数字,下一个input获得焦点
//          e.keyCode96 --》105是右边小键盘，48到57，是主键盘上的。
            var n=e.keyCode;
            if(n!=8&&n>=96&&n<=105&&n>=48&&n<=57){
                $(this).next().focus()
            }
        })
        </script>
    </body>

153

5678

提交

我又重新看了下你刚写的，是不是说后台传个手机号过来,前端先显示前3个跟尾3个,中间4个先不显示,然后中间放4个输入框让他输,
不输或者没输对这个提交按钮就没用,

 var valid = function (str) {  // str 为后台的值，此处为1351234678
     var arr = ['1', '3', '5','0','0','0','0','6','7','8'];
     arr[3] = $("input").eq(0).val();
     arr[4] = $("input").eq(1).val();
     arr[5] = $("input").eq(2).val();
     arr[6] = $("input").eq(3).val();
     if (str == arr.join("")) {
        return true;
     } else {
        return false;
     }
 };
 // 提交事件
 $("button").click(function () {
        if (valid("1351234678")) {
            // 通过 do something...
        } else {
          // 不通过 do something...
        }
 });

<!DOCTYPE html>

function onload(url){ var mobile=12345678911; } input{ width: 20px; }

<div id="testBtn" style="clear:both;width:100px;height:30px;background: #c0b7b0;border-radius: 3px;color:#F0F0F0;text-align: center;line-height: 30px;">提交</div>

$(function (){ var mobile="12345678911"; //这是后台传过来的,我写死的,你拿到后自己变掉就可以了 $("#spMobileHeader").text(mobile.substring(0,4)); //显示前4个 $("#spMobileEnd").text(mobile.substring(8,11)); //显示后3个 }); function changefocus(index){ $("input").each(function (i){ if (i==index){ $(this).focus(); } }); } function checkMobile(){ var mobile="12345678911"; //这是后台传过来的 var inputMobile=""; $("input").each(function (i){ inputMobile+=$(this).val(); }); var contrastMoblie=mobile.substring(4,8); if (inputMobile==contrastMoblie){ /* 在这里做你需要做的事，我只是改了下按钮的颜色 */ $("#testBtn").css("background","#960019"); $("#testBtn").css("color","white"); } } $("input").keyup(function(e){ //退格键 if(e.keyCode==8){ $(this).focus(); } })

新建个TXT文档复制过去然后改成html然后在打开下看是不是你要的效果

<!DOCTYPE html>

input{ width: 20px; }

<div id="testBtn" style="clear:both;width:100px;height:30px;background: #c0b7b0;border-radius: 3px;color:#F0F0F0;text-align: center;line-height: 30px;">提交</div>

![![图片说明](https://img-ask.csdn.net/upload/201702/08/1486549368_499353.png)图片说明](https://img-ask.csdn.net/upload/201702/08/1486549362_811247.png)图片说明

<!DOCTYPE html>
< html>
< head>
< script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></ script>
< style>
input {
width: 20px;
}
< /style>
< /head>
< body>

< /div>

<div id="testBtn" style="clear:both;width:100px;height:30px;background: #c0b7b0;border-radius: 3px;color:#F0F0F0;text-align: center;line-height: 30px;">提交</div>

后台手机号的innerHTML(jQuery是text input是val())比较填的，如果填的空就...如果不等于就...