HTML5应用：setCustomValidity(message)接口

最新推荐文章于 2022-03-26 10:47:04 发布

shitouPlus

最新推荐文章于 2022-03-26 10:47:04 发布

阅读量1.8k

点赞数

分类专栏： HTML JS

本文链接：https://blog.csdn.net/shitouPlus/article/details/47070701

版权

JS 同时被 2 个专栏收录

58 篇文章 0 订阅

订阅专栏

HTML

18 篇文章 0 订阅

订阅专栏

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"οninput="chePattern(this,'请输入3个字母')" maxlength="3">
        </label>
        <br>
        <label for="password">密 码
            <input type="password" name="password" placeholder="请输入密码" required="required" pattern="^\d{3}$"οninput="chePattern(this,'请输入3位数字')" maxlength="3" οnblur="document.myform.password1.pattern=document.myform.password.value;">
        </label>
        <br>
        <label for="password1">密 码
            <input type="password" name="password1" placeholder="请再次输入密码" required="required" maxlength="3" οninput="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

shitouPlus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML5应用：setCustomValidity(message)接口

html5自带的表单验证给前端开发带来了极大的方便，但有些验证还是要自己写，比如常见的注册界面，需要用户重复输入两次密码，这时候自带的type验证还有pattern验证是不能够实现的。但是可以换一种角度，通过更改第二次输入密码时的pattern来达到验证。我表达的可能不是很清楚，下面通过一个demo看一下具体的实现。
复制链接

扫一扫