己所不欲,勿施于人 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

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个
  • 发布文章:1553篇
  • 用户评论:834条
  • 开博至今:4337天

正则速查

[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 只匹配最近的一个字符串;不重复匹配

最新回复

  • 小云: 不错
  • tper: 你列子中按分类归档的图片,每个分类下面显示分类下的文章的代码是怎...
  • 小云: 写的很不错
  • 女装品牌: 文章不错支持一下
  • memory: 升级之后不能访问是密码套件的事儿。其实可以配置好一个写公共文件引...
  • 欧文斯: 很奇怪,都升级之后 443 SSL 加密不能访问,其他端口却可以
  • 子午书屋: 好久没使用memcache了
  • 小云: 写的不错,谢谢分享
  • yiye: 楼主你好,不知道我回复的邮件您看到没?我下载的JPress不是最...
  • memory: 海哥最近更新的新版的我还没有测试过。具体原因还不清楚。不过你可能...
  • yiye: 楼主,我下的是最新的官方mysql镜像,然后密码用户名都正确,数...
  • memory: 这个是15年的文章了,这几年不知道有没有变化 。 你可以根据错误...
  • nice: 请教下这个评论审核提示代码是直接在评论模板调用的吗,我直接用了...
  • vultr: 学习了
  • 小云: 厉害,实用
  • memory: NND。自己写的看不懂了。。。
  • memory: 服务器上的一个配置.