忙于采集的蜜蜂,无暇在人前高谈阔论 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

Jquery手机号验证-检测输入离开或完成-倒计时等一通功能For用户注册表单

前端设计 memory 发布于January 22, 2018 标签: JavaScript

直接看图上代码

<form method="post" onsubmit="return checkForm(this)">
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="username" class="ant-form-item-required" title="用户名">用户名</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="text" placeholder="只能使用字母+数字,且字母开头" maxlength="11" id="username" name="username" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="phone" class="ant-form-item-required" title="手机号">手机号</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="text" placeholder="请输入手机号" maxlength="11" id="phone" name="phone" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="sms_code" class="ant-form-item-required" title="手机验证码">手机验证码</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper" style="width: 50%;">
                    <input type="text" maxlength="6" placeholder="手机验证码" name="sms_code" id="sms_code" class="ant-input ant-input-lg"></span>
                <button type="button" class="ant-btn ant-btn-primary ant-btn-lg" style="width: 48%;position: relative;top: -1px;" id="getcode" onclick="send()">
                    <span>获取验证码</span></button>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="email" class="ant-form-item-required" title="邮箱">邮箱</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="email" name="email" placeholder="请输入邮箱" id="email" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="qq" class="ant-form-item-required" title="QQ">QQ</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="qq" name="qq" placeholder="请输入QQ" id="qq" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="password" class="ant-form-item-required" title="设置密码">设置密码</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="password" maxlength="128" placeholder="请输入密码" name="password" id="password" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>
    <div class="ant-row ant-form-item">
        <div class="ant-col-6 ant-form-item-label">
            <label for="repassword" class="ant-form-item-required" title="确认密码">确认密码</label></div>
        <div class="ant-col-18 ant-form-item-control-wrapper">
            <div class="ant-form-item-control ">
                  <span class="ant-input-affix-wrapper">
                    <input type="password" maxlength="128" placeholder="请重新输入密码" name="repassword" id="repassword" class="ant-input ant-input-lg"></span>
            </div>
        </div>
    </div>

    <div class="ant-row ant-form-item">
      <div class="ant-col-6 ant-form-item-label">
        <label for="company" class="ant-form-item-required" title="公司名称">公司名称</label></div>
      <div class="ant-col-18 ant-form-item-control-wrapper">
        <div class="ant-form-item-control ">
          <span class="ant-input-affix-wrapper">
            <input type="text" placeholder="请输入公司名称" value="" id="company" class="ant-input ant-input-lg"></span>
        </div>
      </div>
    </div>
    <div class="ant-row ant-form-item" style="margin-bottom: 5px;">
        <div class="ant-form-item-control-wrapper">
            <div class="ant-form-item-control has-success">
                <label class="ant-checkbox-wrapper" style="float: left;">
                    <span class="ant-checkbox" id="checkbox"><!--ant-checkbox-checked-->
                      <input type="checkbox" class="ant-checkbox-input" value="1">
                      <span class="ant-checkbox-inner"></span>
                    </span>
                    <span>同意</span> </label>
                <a href="">《服务条款》</a></div>
        </div>
    </div>
    <div class="ant-row" style="display: flex; flex-direction: row;">
        <input type="submit" id="submit" class="submit ant-btn ant-btn-primary ant-btn-lg" value="注 册" disabled="disabled">
        <button type="button" class="ant-btn ant-btn-primary ant-btn-lg" style="margin-left: 5px;" onclick="window.location.href='/index.php/public/login'">
            <span>已有账号,去登录</span></button>
    </div>
</form>

<script>
    $(function(){
        //同意协议
        $('#checkbox').click(function(){
            $(this).toggleClass('ant-checkbox-checked');
            if($(this).hasClass('ant-checkbox-checked')){
                $('#submit').removeAttr("disabled");
            }else{
                $('#submit').attr("disabled",true);
            }
        });
        //手机号输入状态检测
        $('#phone').on("input propertychange,blur",function(){
            var val=$(this).val();
            if(checkPhone(val)==true){
                $('#getcode').removeAttr("disabled");
            }else{
                $('#getcode').attr("disabled",true);
            }
        });
    };
    //验证手机号
    function checkPhone(phone){
        if(!(/^1[34578]\d{9}$/.test(phone))){
            return false;
        }
        return true;
    }
    
    //验证邮箱
    function checkEmail(mail) {
        if(!(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(mail))){
            return false;
        }
        return true;
    }
    //获取验证码
    function send(){
        var phone=$('#phone').val();
        if(checkPhone(phone)==false){
            alert('手机号码有误,请重填');
            return false;
        }
        $.get('/send_sms',{phone:phone},function(res){
            if(res.code==1){
                var secend=60;
                var intval=window.setInterval(function(){
                    secend--;
                    $('#getcode span').html(""+secend+"秒后重新获取");
                    if(secend<=0){
                        window.clearInterval(intval);
                        $('#getcode').attr("disabled",false);
                        $('#getcode span').html("获取验证码");
                    }

                },1000);

                $('#getcode').attr("disabled",true);
            }else{
                alert(res.info);
            }
        });
    }
    //提交表单、检测表单
    function checkForm(obj){
        var flag=true;
        var username=$('#username');
        var phone=$('#phone');
        var sms_code=$('#sms_code');
        var password=$('#password');
        var repassword=$('#repassword');
        var email=$('#email');
        var vcode=$('#vcode');
        var qq=$('#qq');

        var re = /^[a-zA-Z][a-zA-Z0-9]*$/;
        if(!re.test(username.val())){
            alert('用户名只能使用字母或数字,且第一位为字母');
            return false;
        }
        if(username.val().length<4){
            alert('用户名过短');
            return false;
        }
        if(checkPhone(phone.val())==false){
            alert('手机号码有误,请重填');
            return false;
        }
        if(!sms_code.val()){
            alert('请输入短信验证码');
            return false;
        }
        if(password.val().length<6){
            alert('密码不能小于6位');
            return false;
        }
        if(password.val()!=repassword.val()){
            alert('两次密码不一致');
            return false;
        }
        if(!checkEmail(email.val())){
            alert('邮箱格式不正确');
            return false;
        }
        if(!vcode.val()){
            alert('请输入验证码');
            return false;
        }
        if($('#checkbox').hasClass('ant-checkbox-checked')){
            return true;
        }else{
            alert('请先阅读《服务条款》');
            return false;
        }

    }
</script>

相关推荐

添加新评论

全部评论:已有 4 条评论

  1. 一个默默无闻的码农

    function checkEmail的if里的变量写错了

    1. memory

      谢谢。以前没用到checkEmail,是注释掉的,所以这儿我也没注意。哈哈。已修正。

  2. 亚克力浴缸

    还好我不是学这些的,不然打错那个都不知道

    1. memory

      额。。。

网站状态

  • 栏目分类:49个
  • 发布文章:1512篇
  • 用户评论:729条
  • 开博至今:4069天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • 夏目贵志: 我终于懂了是什么意思了!!!
  • 柳溪: 支持博主 很详细!
  • memory: 谢谢。以前没用到checkEmail,是注释掉的,所以这儿我也没...
  • 一个默默无闻的码农: function checkEmail的if里的变量写错了
  • memory: 谢谢大神鼓励。哈哈 有没想到的地方还望多多指正
  • 梦康: 感谢分享,前几天我刚接触这个命令,之前都没用到过。总结非常全面。
  • 梁兴健: Parse error: syntax error, unexp...
  • 耐火砖: 感谢博主分享,很有用
  • memory: 额。。。
  • 亚克力浴缸: 还好我不是学这些的,不然打错那个都不知道
  • memory: 哈哈。写的太2了,将就着吧。我自己看也晕了...
  • 亚克力浴缸: 看晕了,头大
  • 泽泽: 至少手机上图根本没动
  • memory: 呵呵,难道你现在看到的不是gif图?
  • 泽泽: 原文是gif图,无脑抓取也要读一读吧
  • 亚克力浴缸: 学习了 in 参数
  • asd: 感谢博主,功能已实现