分享一款mui制作的绑定手机号模板,表单包括发送验证码、选择国家(从底部弹出),输入框提示验证。
表单基本验证,包括手机号、昵称和密码
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);
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791