首页 > 代码库 > HTML输入验证提示信息

HTML输入验证提示信息

2024-11-05 17:40:02   209人阅读

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>

 

<form action="">        <label>            数字: <input type="text" pattern="^\d{11}$" oninvalid="setCustomValidity(‘请输入11位数字‘)">        </label>        <input type="submit">    </form>

HTML输入验证提示信息


联系
我们