HTML5应用：setCustomValidity(message)接口

关注

原创最新推荐文章于 2026-09-20 19:47:45 发布 2k 阅读 AI 写同款· GEO 优化 ›

HTML5表单的自动验证、取消验证、自定义错误信息通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属性的指定。pattern 属性的主要目的是根据表单控件上设置的格式规则验证输入是否为有效格式。通过在 input 元素中使用pattern 属性，并将属性值设为某个格式的正则表达式，该属性实现在提交表单时会检查其内容是否符合给定格式。阅读详情

html5自带的表单验证给前端开发带来了极大的方便，但有些验证还是要自己写，比如常见的

注册界面，需要用户重复输入两次密码，这时候自带的type验证还有pattern验证是不能够实现

的。但是可以换一种角度，通过更改第二次输入密码时的pattern来达到验证。我表达的可能

不是很清楚，下面通过一个demo看一下具体的实现。

自定义html5验证

验证效果截图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    input {
        margin: 10px;
        font-size: 18px;
    }
    </style>
</head>

<body>
    <form action="" name="myform">
        <label for="user">用户名
            <input type="text" name="user" placeholder="请输入用户名" pattern="[A-z]{3}" required="required"oninput="chePattern(this,'请输入3个字母')" maxlength="3">
        </label>
        <br>
        <label for="password">密 码
            <input type="password" name="password" placeholder="请输入密码" required="required" pattern="^\d{3}$"oninput="chePattern(this,'请输入3位数字')" maxlength="3" onblur="document.myform.password1.pattern=document.myform.password.value;">
        </label>
        <br>
        <label for="password1">密 码
            <input type="password" name="password1" placeholder="请再次输入密码" required="required" maxlength="3" oninput="chePattern(this,'两次密码不同')">
        </label>
        <br>
        <label for="submit">
            <input type="submit" value="submit" name="submit">
        </label>
    </form>
    <script>
    function chePattern(i,tip) {
        var v = i.validity;
        if (true === v.valueMessing) {
            i.setCustomValidity("请填写此字段");
        } else {
            if (true === v.patternMismatch) {
                i.setCustomValidity(tip);
            } else {
                i.setCustomValidity("");
            }
        }
    }
    </script>
</body>

</html>

参考文章 http://tid.tenpay.com/?p=3592

收录于