HTML5开发-表单验证实例

最新推荐文章于 2021-07-08 22:52:27 发布

前端独秀

最新推荐文章于 2021-07-08 22:52:27 发布

阅读量388

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jiahakjab&title=HTML5%E5%BC%80%E5%8F%91-%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%E5%AE%9E%E4%BE%8B

版权

前端专栏收录该内容

493 篇文章 3 订阅

订阅专栏

表单验证
element/form/_validate.html

<!doctype html>
<html>
<head>
    <title>表单验证</title>
</head>
<body>

    <!--
        表单验证（Opera  支持此标准）

        required - 指定是否为必填元素
        pattern - 用指定的正则表达式对 input 的值做验证
        url, email, number 等有验证功能的元素

        element.validity - 返回验证状态，ValidityState 对象
        ValidityState - 验证状态对象
          valid - 是否通过了验证（以下 8 个值都为 false，则此值为 true），boolean 类型
          valueMissing - 是否没有值（对应的元素如果设置为必填但没有值的时候，此值为 true），boolean 类型
          typeMismatch - 是否值的类型与期望类型不匹配，boolean 类型
          patternMismatch - 是否正则表达式验证失败，boolean 类型
          tooLong - 是否字符过多，boolean 类型
          rangeUnderflow - 是否比预设的最小值还要小，boolean 类型
          rangeOverflow - 是否比预设的最大值还要大，boolean 类型
          stepMismatch - 是否不匹配 step 的设置（比如 step 为 3，那么如果值要匹配 step 的话，则一定要为 3 的倍数），boolean 类型
          customError - 是否有自定义错误信息，boolean 类型

        element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
        element.setCustomValidity("") - 用于清除自定义的错误信息
    -->

    <form action="#">
        <input type="text" name="txt" id="txt" required />
        <input type="email" name="email" id="email" />
        <input type="submit" name="btn" value="submit" />

        <br />
        <input type="button" value="验证 email 元素" onclick="validateEmail();" />
    </form>

    <script type="text/javascript">

        function validateEmail() {
            var email = document.getElementById("email");
            var validityState = email.validity;

            alert
            (
                validityState.valid   "\n"  
                validityState.valueMissing   "\n"  
                validityState.typeMismatch   "\n"  
                validityState.patternMismatch   "\n"  
                validityState.tooLong   "\n"  
                validityState.rangeUnderflow   "\n"  
                validityState.rangeOverflow   "\n"  
                validityState.stepMismatch   "\n"  
                validityState.customError
            );
        }

    </script>

</body>
</html>