mui绑定手机号【原创

来源:https://www.sucaihuo.com/js/1416.html 2017-03-04 04:53浏览(2740) 收藏

分享一款mui制作的绑定手机号模板,表单包括发送验证码、选择国家(从底部弹出),输入框提示验证。
mui绑定手机号
分类:表单代码 > 城市选择 难易:初级
下载资源 下载积分: 60 积分

表单基本验证,包括手机号、昵称和密码

document.getElementById("btn_submit").addEventListener('tap', function() {
    var username = $.trim($("#username").val());
    var pwd = $.trim($("#pwd").val());
    var pwd2 = $.trim($("#pwd2").val());
    var phone = $.trim($("#phone").val());
    var phone_code = $.trim($("#phone_code").val());
//                                var reg_type = $("input[name=reg_type]:checked").val();
    var reg_agreement = $("#reg_agreement").attr("checked");
    var phone_pattern = /^1[3|4|5|7|8][0-9]{9}$/;
    if (phone == '') {
        mui.alert('请输入手机号', '系统提示', function() {
            $('#phone').focus();
        });
        return false;
    }
    if (!phone_pattern.test(phone)) {
        mui.alert('请输入正确的手机号', '系统提示', function() {
            $('#phone').focus();
        });
        return false;
    }
    if (phone_code == '') {
        mui.alert('请输入短信验证码', '系统提示', function() {
            $('#phone_code').focus();
        });
        return false;
    }
    if (username == '') {
        mui.alert('昵称不能为空', '系统提示', function() {
            $('#username').focus();
        });
        return false;
    }
    if (pwd == '') {
        mui.alert('请输入密码', '系统提示', function() {
            $('#pwd').focus();
        });
        return false;
    }
    if (pwd.length < 6 || pwd.length > 16) {
        mui.alert('密码长度应在6-16个字符范围内', '系统提示', function() {
            $('#pwd').focus();
        });
        return false;
    }
    if (pwd != pwd2) {
        mui.alert('两次输入的密码不一致', '系统提示', function() {
            $('#pwd2').focus();
        });
        return false;
    }
});

发送验证码

var wait = 120;//倒计时120秒
var intervalId;//定时
var i = wait;//倒计时递减 1
function exit() {
    $("#sendPhoneCode").val(i + "秒后重新发送").addClass("disabled");
    i = i - 1;
    if (i <= -1) {
        clearInterval(intervalId);
        $("#sendPhoneCode").removeAttr("disabled");
        $("#sendPhoneCode").val("发送验证码").removeClass("disabled");
    }
}
function send_phone_code() {

    var phone = $("#phone").val();
    if (phone == '') {
        mui.alert('请输入手机号', '系统提示', function() {
            $('#phone').focus();
        });
        return false;
    }
    if (!phone.match(/^1[3|4|5|7|8][0-9]{9}$/)) {
        mui.alert('请输入正确的手机号', '系统提示', function() {
            $('#phone').focus();
        });
        return false;
    }

    i = wait;
    $.post("ajax.php", {
        "phone": phone
    }, function(data) {
        $("#sendPhoneCode").attr("disabled", "disabled");
        $("#sendPhoneCode").val("发送成功");
        intervalId = setInterval("exit()", 1000);
    })
}

下拉选择

(function($, doc) {
    $.init();
    $.ready(function() {
        //普通示例
        var userPicker = new $.PopPicker();
        userPicker.setData([{
                value: 'ywj',
                text: '澳大利亚'
            }, {
                value: 'aaa',
                text: '加拿大'
            }, {
                value: 'lj',
                text: '美国'
            }, {
                value: 'ymt',
                text: '新西兰'
            }, {
                value: 'shq',
                text: '中国'
            }]);
        var showCountryButton = doc.getElementById('showCountry');
        var countryResult = doc.getElementById('countryResult');
        showCountryButton.addEventListener('tap', function(event) {

            userPicker.show(function(items) {
                countryResult.innerText = items[0]['text'];
                //返回 false 可以阻止选择框的关闭
                //return false;
            });
        }, false);
    });
})(mui, document);
标签: 绑定手机号
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/1416.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2