峡山飞云
2017-02-08 07:48
采纳率: 100%
浏览 1.6k
已采纳

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

图片说明

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

14条回答 默认 最新

  • 邱金金 2017-02-08 10:43
    已采纳

    <!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个
    });

    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();
    }
    })
    < /script>
    < /html>

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

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 07:50

    用indexOf应该可以

    评论
    解决 无用
    打赏 举报
  • qq_36498920 2017-02-08 07:51

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

    评论
    解决 无用
    打赏 举报
  • Z. ZHANG 2017-02-08 07:55

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

    评论
    解决 无用
    打赏 举报
  • 当作看不见 2017-02-08 08:13

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

    评论
    解决 无用
    打赏 举报
  • 当作看不见 2017-02-08 08:36
        <!--这里获取什么的和提交后的就不多说了-->
        <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>
    评论
    解决 无用
    打赏 举报
  • tyutzjx 2017-02-08 09:04




    153


    5678


    提交


    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 09:16

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

    评论
    解决 无用
    打赏 举报
  • 脸别再大了 2017-02-08 09:50
     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...
        }
 });
    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 10:15

    <!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然后在打开下看是不是你要的效果

    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 10:17

    <!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>

    $(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(); } })
    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 10:22

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

    评论
    解决 无用
    打赏 举报
  • 邱金金 2017-02-08 10:26

    <!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>

    评论
    解决 无用
    打赏 举报
  • qq_33625012 2017-02-09 03:16

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

    评论
    解决 无用
    打赏 举报

报告相同问题？

提交

相关推荐 更多相似问题