如何使用H5判断登录页面手机号码长度是否正确和账号密码不能为空,从而减少对服务器的请求(注册也一样)

本文主要是介绍如何使用H5判断登录页面手机号码长度是否正确和账号密码不能为空,从而减少对服务器的请求(注册也一样)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在H5表单中添加了需要新特性，同时也添加了一个关于input的validity新对象，我们可以利用这个来进行一些简单判断，减少对服务器的请求

HTML

账号 : <input type="text" placeholder="请输入手机号码" reuqired pattern="^[0-9]{11}$" id="phone"/>
密码 : <input type="password" placeholder="请输入密码" reuqired id="password"/>

1. elem.validity.valueMissing 验证required 的input标签是否为空
2. elem.validity.patternMismatch 验证 pattern里面的正则表达式是否正确

JS

var phone    = document.getElementById('phone');
var password = document.getElementById('password');if(phone.validity.valueMissing) 
{alert("账号不能为空");return;
} else if(phone.validity.patternMismatch) 
{alert("账号输入有误");return;
}
if(password.validity.valueMissing) 
{alert("密码不能为空");return;
}$.ajax(url,data,function(){.......
});

然后下面再进AJAX请求判断是否登录成功,而后台就不需要判断手机、密码为空和手机号长度不对的请求情况
不但减少了对服务的请求，同时减少后台的代码量。虽然不多…..

这篇关于如何使用H5判断登录页面手机号码长度是否正确和账号密码不能为空,从而减少对服务器的请求(注册也一样)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---