<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form{
width: 640px;
margin:0 auto;
}
input{
display: block;
width: 100%;
height: 25px;
margin-bottom:20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>表单</legend>
<!--<label>
用户名：<input type="text" name="username" class="username"/>
</label>-->
<label>
tel：<input type="tel" name="tel" class="tel" pattern="^1[0-9]{10}$"/>
</label>
<input type="submit" value="提交数据" id="submit"/>
</fieldset>
</form>
<script>
var userName=document.querySelector(‘.username‘);
var tel=document.querySelector(‘.tel‘);
function fn(){
console.log(typeof this.value);
this.setCustomValidity(‘输入格式有误，11位数字！‘);//此处必须指定为this
}
tel.addEventListener(‘invalid‘,fn)
</script>
</body>
</html>
bug: 当第一次输入的电话号码不正确的时候，不刷新页面，输入正确的电好号码， 还是不断提示验证不通过，，除非刷新页面，第一次就直接输入正常电话号码，就不会触发invalid事件