HTML输入验证提示信息

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、oninvali事件通过setCustomValidity方法来自定义提示信息

<form action="">

        <label>

            数字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity('请输入11位数字')">

        </label>

        <input type="submit">

    </form>

2、onsubmit事件自定义提示信息

<!DOCTYPE HTML>

<head>

<meta charset="UTF-8">

<title>Html5页面使用javascript验证表单判断输入</title>

<script language="javascript">

function check(){

  var pass1=document.getElementbyid("pass1");

  var pass2=document.getElementbyid("pass2");

  if (pass1.value!=pass2.value){

    pass2.setCustomvalidity("密码不一致");

  else

    pass2.setCustomvalidity("");

  }

  var email=document.getElementbyid("email");

  if (!email.checkValidity())

    email.setCustomvalidity("请输入正确的email地址");

}

</script>

</head>

<form id="testForm" onsubmit="return check()">

  密码:<input type="password" name="pass1" id="pass1" /><br/>

  确认密码:<input type="password" name="pass2" id="pass2" /><br/>

  Email:<input type="email" name="email" id="email" /><br/>

  <input type="submit" />

</form>