html5表单验证反馈

表单验证：

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，否则返回false

- oText.addEventListener("invalid",fn1,false); // invalid 验证反馈事件

- ev.preveDefault() // 阻止默认验证

- valueMissing：输入值为空时

- typeMismatch：控件值与预期类型不匹配

- patternMismatch：输入值不满足pattern正则

- tooLong：超过maxLength最大限制

- rangeUnderflow：验证的range最小值

- rangeOverflow：验证的range最大值

- stepMismatch：验证的range的当前值是否符合min、max及step的规则

- customError 不符合自定义验证

>> setCustomValidity(); 自定义验证

<form>
  <input type="text" id="text" name="user"
     placeholder="请输入4-16个字符"
     required
     pattern="\d{1,5}"
     maxlength = "5"
     
   />
  <input type="range" max="5" min="0" step="2" />
  <input type="submit" formnovalidate/> // formnovalidate关闭表单验证
</form>

<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false); // lnvalid事件：验证反馈
  // ev.preventDefault 阻止默认验证
oText.oninput=function() { // oninput事件
  if(this.value === "敏感词"){ // 自定义事件
    this.setCustomValidity("请不要输入敏感词");
  } else {
    this.setCustomValidity(""); // 必须清空
  }
}

function fn() {
  // 存储表单反馈信息对象
  console.log(this.validity)
  // valid查看验证是否通过 boolean值
  console.log(this.validity.valid)
  console.log(this.validity.valueMissing); //前提具有required 输入为空时候返回true。
}
//typeMismatch、patternMismatch、customError 与valueMissing一样
  当条件不被满足时,返回为true,反之,返回false。
------- 意义不大 -------
// tooLong 超过了maxLength最大值,open浏览器下为true,其余浏览器可能不支持(或返回false),
  且设置maxLength后正常输入无法超过maxLength设置的长度，
  代码可以oText.value = "123456" ...
  注意将input类型换成email类型方便查看
// rangeUnderflow、rangeOverflow、stepMismatch 与tooLong类似

// 当八项内容都为false时，this.validity.valid返回true。
  当八项有一项为true，this.validity.valid返回false。
</script>

html5表单验证反馈

猜你喜欢