JavaScript 验证 API中的setCustomValidity()方法

分类 : .NET技术

setCustomValidity()办法:

设置 input 元素的 validationMessage 属性,用于自定义错误提示信息的办法。

留意:运用 setCustomValidity 设置了自定义提示后,validity.customError 就会变成true,则 checkValidity() 总是会返回false,招致无论重新输入的格式正确与否,都会提示设置好的错误信息。

处理方法:用obj.validity.patternMismatch判别,假如输入的格式正确,就将setCustomValidity 清空,使JavaScript重新判别validity.customError的值。

参考:

在该链接中,提到三种清空setCustomValidity的办法,但经过测试,只要第一种办法setCustomValidity('')能够运用。

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>未使用setCustomValidity()方法</title>

</head>

<body>

   <form name="test" action="" method="post">

       <input id="input" type="text" required="required" placeholder="请输入4-11位字母加数字的密码" pattern="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{4,14}$" oninput="this.setCustomValidity('')">

       <input type="submit" onclick="setMyText()">

   </form>

   <script type="text/javascript">

       function setMyText(){

           var obj = document.getElementById("input");

           if (obj.validity.patternMismatch === true) {

               obj.setCustomValidity("密码是必填的");

           } else {

               obj.setCustomValidity('');

           }

       }

   </script>

</body>

</html>

相关文章

分类: .NET技术    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16