HTML5 input姓名电话号码表单验证

  前端  2018-04-13 14:12:26  21501 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML5 姓名电话表单验证</title>
</head>
<body>
	<form action="">
		<input type="text" required name="name" placeholder="姓名" pattern="[\u4e00-\u9fa5]{2,}"  oninvalid="validatelt(this,'真实姓名必须是中文，且长度不小于2')"/>
		<input type="tel" required name="tel" placeholder="电话" maxlength="11" pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}" oninvalid="validatelt(this,'电话号只能是11位的整数')">	
		<input type="submit" value="提交">
	</form>
</body>
</html>
<script>
    //对悬浮窗的设置
    function validatelt(inputelement,err){
        if(inputelement.validity.patternMismatch){
            inputelement.setCustomValidity(err);
            //错误后就清空，不过执行顺序有点问题就不要了
//                if(confirm("输入有误,是否清空此项？")){
//                    inputelement.value="";
//                }
        }else{
            inputelement.setCustomValidity("");
            return true;
        }
    }
</script>