如何使用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请求判断是否登录成功,而后台就不需要判断手机、密码为空和手机号长度不对的请求情况
不但减少了对服务的请求，同时减少后台的代码量。虽然不多…..