JavaScript的validityState对象使用

JavaScript的validityState对象使用

validityState是表单验证一种，它为我们提供了很多的验证函数接下来我给大家来了解下这些函数的用法

首先它一共有八种函数验证它们分别都是通过validityState对象的validity属性来获取

1.valueMissing

描述：首先表单元素得先设置required特性，则为非空，如果非空项得值为空，valueMissing属性就会返回true否则返回false；

接下来我们看代码
html代码：

<form action="" method="post" name="myform">
   <dl>
   <dt>电子邮箱：</dt>
   <dd><input id="email" type="email" placeholder="例如:123@c.com" required pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" maxlength="10"/></dd>
</dl>
   <dl>
      <dt>&nbsp;</dt>
      <dd><input name="btn" type="image" src="images/register.jpg" class="btn" onclick="testphone()"/></dd>
   </dl>
 </form>

JavaScript代码：

//valueMissing
function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.valueMissing){
      validityState.setCustomValidity("邮箱填写未填写");
   }
}

首先我们来看没有利用这个属性提交空值

然后再来看下用了这个属性来提交下空值

可以看到利用了这个valueMissing属性可以使用户再没有输入值得时候给用户一个更人性化得提示

2.typeMismatch

描述：判断输入的值和type类型匹配不匹配，如果用户输入的内容与表单类型不符合，则typeMismatch属性就会返回true否则返回false;
例如：type=email是要求用户输入的是邮箱，但是格式不正确
接下来我们来看代码，html代码还是原来那个，我们在js代码中加入typeMismatch属性判断

function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.valueMissing){
      validityState.setCustomValidity("邮箱填写未填写");
   }else if(validityState.validity.typeMismatch){
      validityState.setCustomValidity("邮箱格式错误");
}
}

接下来我们来看下没有用typeMismatch来提交下

这样给用户的提示就很模糊，但是如果用了typeMismatch来提交

3.patternMismatch

描述：用于输入的值与pattern特性进行匹配，如果输入的内容不符合pattern验证模式规则，则patternMismatch返回true否则返回false;
例如：我们先在这个邮箱输入框里添加pattern特性，再把类型改成text然后先不使用patternMismatch来进行验证

然后添加patternMismatch属性验证

function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.valueMissing){
      validityState.setCustomValidity("邮箱填写未填写");
   }else if(validityState.validity.typeMismatch){
      validityState.setCustomValidity("邮箱格式错误");
   }else if(validityState.validity.patternMismatch){
      validityState.setCustomValidity("邮箱格式错误");
   }
}

接下看下效果图

4.tooLong

描述：tooLong属性用于输入的内容长度是否超过maxlength特性限定的字符长度，虽然在输入的时候会限制表单内容长度，但是如果在某种情况下是通过程序设置，还是会超过最大长度限制。如果超出了就返回true否则返回false；
例如：我们给email标签设置一个maxlength特性**maxlength=“10”**但是由于当你设置了最大字符长度的时候，所有的浏览器都会阻止用户继续输入字符；所以效果图展示不了（尴尬脸）

function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.valueMissing){
      validityState.setCustomValidity("邮箱填写未填写");
   }else if(validityState.validity.typeMismatch){
      validityState.setCustomValidity("邮箱格式错误");
   }else if(validityState.validity.patternMismatch){
      validityState.setCustomValidity("邮箱格式错误");
   }else if(validityState.validity.tooLong){
      validityState.setCustomvalidity("长度超出最大范围");
   }
}

5.RangeUnderflow

描述：RangeUnderflow属性用于判断用户输入的数值是否小于min特性的值，如果小于则返回true否则返回false
例如：我们给邮箱设置min特性**min=“5”**然后我们输入4就会返回true

<dl>
   <dt>电子邮箱：</dt>
   <dd><input id="email" type="email" placeholder="例如:123@c.com" min="5"/></dd>
</dl>
  
function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.rangeUderflow){
      validityState.setCustomValidity("值小了");
   }
}

效果如下

6.rangeOverflow

描述：rangeOverflow属性用于判断用户输入的数值是否大于max特性的值，如果大于返回true否则返回false
例如：我们给邮箱设置max特性**max=“5”**然后我们输入6就会返回true

<dl>
   <dt>电子邮箱：</dt>
   <dd><input id="email" type="email" placeholder="例如:123@c.com" max="5"/></dd>
</dl>
  
function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.rangeOverflow){
      validityState.setCustomValidity("值大了");
   }
}

效果如下

7.stepMismatch

描述：stepMismatch用于判断输入的值符不符合step特性所推算出的规则，填写熟知的表单元素可能需要同时设置min、max、step特性。限制了输入的值必须是最小值与step特性值得倍数之和。
例如：min=“2” max=“10” step=“2” 然后输入的值是5则返回true否则返回false

<dl>
   <dt>电子邮箱：</dt>
   <dd><input id="email" type="email" placeholder="例如:123@c.com" max="10" min="2" step="2"/></dd>
</dl>
  
function testphone(){
   var validityState=document.getElementById("email");
   if(validityState.validity.stepMismatch){
      validityState.setCustomValidity("不符合");
   }else{
      validityState.setCustomValidity("ok");
   }
}

效果如下

然后我们输入一个6

8.customError

描述：自定义提示错误验证信息。使用setCustomValidity()方法自定义错误提示信息；也就是我们之前判断以后如果成立的下面那行validityState.setCustomValidity(“不符合”);代码，此时customError为true。如果给的是空值也就是validityState.setCustomValidity("");就是清楚自定义的错误信息，此时customError为false;

总结：validityState对象可以很好的帮助用户在使用我们的表单校验时提高用户体验感；