手机端 手机号简单验证 IOS端 fixed弹窗定位问题


<input type="number" class="mobile" oninput="jianting()" maxlength="11">
$('.from-btn').click(function() {
if ($('.username').val().length > 1) {
if ($('.mobile').val().length == 11) {
if ((/^1(3|4|5|6|7|8|9)\d{9}$/.test($('.mobile').val()))) {

if (isAjax == false) {

isAjax = true;
$.ajax({
url: "",
type: 'POST',
dataType: 'json',
data: {},
crossDomain: true,
success: function(rel) {

//ajax返回信息处理
}

isAjax = false;
},
error: function(rel) {

isAjax = false;
alert(` 网络延迟,请稍后再试!`);
}
});
}
} else {
alert(` 请输入正确的手机号!`);
}
} else {
alert(` 请输入正确的手机号!`);
}
} else {
alert(`请输入完整信息后提交!`);
}
});

function jianting() {
if ($.isNumeric($('.mobile').val() * 1) == false) {
alert(` 请输入正确的手机号!`);
}
if ($('.mobile').val().length > 11) {
$('.mobile').val($('.mobile').val().substring(0, 11))
}
}
// ios 软键盘弹出时 body的scrollTop 设为0

if (checkIOS()) {
$('.inputMobile').on('blur', 'input', function() {
$('body').animate({
scrollTop: 0
}, 400);
})
}

// 检测ios系统
function checkIOS() {
let u = navigator.userAgent;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
return isIOS;
}

内容包含设置input 的type为number 自动拉起手机端数字键盘。

maxlength 在手机端貌似不太好使。

用户名长度大于1,手机号长度为11 ,手机号首位为1 第二位不为 2(3456789的手机号都有了…)。

isAjax防止用户多次点击的异步。异步边同步。

jianting 检测用户填入的是否为数字,超出11位后,将取前11位,让用不不再输入多的内容,相当于maxlength。

checkIOS 检测是否为IOS。

inputMobile 这个失去焦点的时候,将页面拉到顶部,或者设置滚动条,到合适的位置。