欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5表单验证(4个实用的表单美化案例)

程序员文章站 2022-06-23 22:32:30
multipart/form-data 在使用包含文件上传控件的表单时,必须使用autocomplete="on" 自动补全功能novalidate 不验证

multipart/form-data 在使用包含文件上传控件的表单时,必须使用
autocomplete="on" 自动补全功能
novalidate 不验证

    <form enctype="multipart/form-data" novalidate autocomplete="on"></form>

placeholder

required 必填
autofocus 默认聚焦
pattern 正则验证

        <input type="text" name="gonghao" required autofocus placeholder="请输入工号" pattern="^\d{5}[imooc]$">

datalist对选择框的记忆
list记忆内容

        <input type="text" list="tips">
        <datalist id="tips">
            <option value="erwerewr"></option>
            <option value="erwerew2r"></option>
            <option value="erwerew2r"></option>
            <option value="erwerewr"></option>
        </datalist>

html5约束验证api

id.validity获取验证约束

    console.log(username.validity);

如果输入值长度大于要求的长度,则截取要求的长度部分

    <input type="number" id="numbers" oninput="checklength(this,5)" step="0.01" />
    function checklength(obj, length) {
        if (obj.value.length > length) {
            obj.value = obj.value.substr(0, length);
        }
    }

valuemissing => required
typemismatch => html类型,如email
rangeunderflow => min

        <input type="text" required pattern="^\d{4}$" oninput="checkit(this)" placeholder="请输入代码">
-----------------------
        function checkit(obj){
            console.log(obj.validity);
            var it = obj.validity;
            if (true===it.valuemissing) {
                obj.setcustomvalidity("不能为空");
            }else{
                if (true===it.patternmismatch) {
                    obj.setcustomvalidity("必须是4个数字");
                }else{
                    obj.setcustomvalidity("");
                }
            }
        }

checkvalidity()满足约束返回true,否则false

    if (username.checkvalidity()) {
        alert("用户名符合");
    } else {
        alert("不符合");
    }

自带验证美化
:required
:optional

HTML5表单验证(4个实用的表单美化案例)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .container{
            max-width:400px;
            margin:20px auto;
        }
        input,select,textarea{
            width: 240px;
            margin:10px 0;
            border:1px solid #999;
            padding: .5em 1em;
        }
        label{
            color:#999;
            margin-left: 10px;
        }
        input:required,textarea:required{
            border-right:3px solid #aa0088;
        }
        input:optional,select:optional{
            border-right:3px solid #999;
        }
        input:required +label::after{
            content: "(必填)"
        }
        input:optional +label::after{
            content: "(选填)"
        }
        input:focus,select:focus,textarea:focus{
            outline:0;
        }
        input:required:focus,textarea:required:focus{
            box-shadow: 0 0 3px 1px #aa0088;
        }
        input:optional:focus,select:required:focus{
            box-shadow: 0 0 3px 1px #999;
        }
        input[type="submit"]{
            background-color: #cc00aa;
            border: 2px solid #aa0088;
            padding:10px 0;
            color:#fff;
        }
        input[type="submit"]:hover{
            background-color:#aa0088;
        }
    </style>
</head>
<body>
    <!-- <div class="contenteditable"></div> -->
    <div class="container">
        <form action="#">
            <input type="name" required><label>名称</label>
            <input type="email" required><label>邮箱</label>
            <input type="tel"><label>手机</label>
            <input type="url"><label>网址</label>
            <select name="" id="">
                <option value="">非必选项一</option>
                <option value="">非必选项二</option>
                <option value="">非必选项三</option>
                <option value="">非必选项四</option>
            </select>
            <textarea name="#" cols="30" rows="10" placeholder="留言(必填)" required></textarea>
            <input type="submit" value="提交表单">
        </form>
    </div>
</body>
</html>

:valid
:invalid

HTML5表单验证(4个实用的表单美化案例)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>纯css表单验证美化(invalid和valid)应用案例</title>
    <style>
        .container{
            margin:100px;
            position:relative;
        }
        input{
            border: 1px solid #999;
            outline:0;
            width:140px;
            height:30px;
            line-height:30px;text-indent:36px;transition: all .3s;
            border-radius:5px;
        }
        span.title{
            position:absolute;
            line-height:30px;
            height: 30px;
            left:2px;
            top:2px;
            transition:all .3s;
        }
        input:focus,input:hover{
            text-indent:2px;
        }
        input:focus+span.title,input:hover+span.title{
            transform:translatex(-120%)
        }
        input:valid ~label::after{
            content: "你输入正确!"
        }
        input:invalid ~label::after{
            content: "你邮箱错误!"
        }
        input:valid{
            border:1px solid green;
        }
        input:invalid{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <input id="mail" type="email" required placeholder="输入邮箱">
        <span class="title">邮箱</span>
        <label for="mail"></label>
    </div>
</body>
</html>

oninvalid
oninput

HTML5表单验证(4个实用的表单美化案例)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>html5表单美化综合案例</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<style>
.onelist {
    margin: 10px 0 5px 12px;
}

.onelist label {
    width: 80px;
    display: inline-block
}

.onelist input,
.onelist select {
    height: 25px;
    line-height: 25px;
    width: 220px;
    border-radius: 3px;
    border: 1px solid #e2e2e2;
}

.onelist input[type="submit"] {
    width: 150px;
    height: 30px;
    line-height: 30px;
}

select:required,
input:required,
textarea:required {
    background: #fff url(../img/star.jpg) no-repeat 99% center;
}

select:required:valid,
input:required:valid,
textarea:required:valid {
    background: #fff url(../img/right.png) no-repeat 99% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

select:focus:invalid,
input:focus:invalid,
textarea:focus:invalid {
    background: #fff url(../img/error.png) no-repeat 99% center;
    box-shadow: 0 0 5px red;
    border-color: red;
    outline: red solid 1px;
}
</style>

<body>
    <form class="myform" onsubmit="return checkform();" method="post">
        <div class="onelist">
            <label for="username">手机号</label>
            <input name="username" id="username" type="text" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" required oninvalid="this.setcustomvalidity('请输入正确的号码');" oninput="setcustomvalidity('')">
        </div>
        <div class="onelist">
            <label for="password">密码</label>
            <input name="password" id="password" type="password" placeholder="6~20位" class="" pattern="^[a-za-z0-9]\w{5,19}$" required oninvalid="this.setcustomvalidity('请输入正确密码');" oninput="setcustomvalidity('')" onchange="checkpassword()">
        </div>
        <div class="onelist">
            <label for="repassword">确认密码</label>
            <input name="repassword" id="repassword" type="password" placeholder="确认密码" class="" required onchange="checkpassword()">
        </div>
        <div class="onelist">
            <label for="repassword">了解方式</label>
            <select name="konw" required>
                <option value="">==请选择==</option>
                <option value="1">搜索引擎</option>
                <option value="2">朋友圈</option>
                <option value="3">朋友推广</option>
                <option value="4">广告投放</option>
            </select>
        </div>
        <div class="onelist">
            <input type="submit" value="提交">
        </div>
    </form>
    <script type="text/javascript">
    function checkpassword() {
        var pass1 = document.getelementbyid("password");
        var pass2 = document.getelementbyid("repassword");

        if (pass1.value != pass2.value)
            // 设置自定义验证约束提示信息
            pass2.setcustomvalidity("两次输入的密码不匹配");
        else
            pass2.setcustomvalidity("");
    }
    </script>
</body>
</html>

默认气泡修改
event.preventdefault(); 阻止默认气泡

HTML5表单验证(4个实用的表单美化案例)

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>表单验证默认样式修改</title>
</head>
<style>
    .oneline{line-height: 1.5;margin:10px auto;}
    .oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "microsoft yahei";display: inline-block;}
    .oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
    .oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
    .error-message{color:red; font-size:12px;text-indent:108px;}
</style>

<body>
    <form id="forms">
        <div class="oneline">
            <label for="name">用户名:</label>
            <input id="name" name="name" class="sinput" required>
        </div>
        <div class="oneline">
            <label for="email">email:</label>
            <input id="email" name="email" class="sinput" type="email" required>
        </div>
        <div class="oneline">
            <input type="submit" value="提交" id="thesubmit">
        </div>
    </form>
    <script>
    function replacevalidationui(form) {

        form.addeventlistener("invalid", function(event) {
            event.preventdefault();
        }, true);

        form.addeventlistener("submit", function(event) {
            if (!this.checkvalidity()) {
                event.preventdefault();
            }
        }, true);
        var submitbutton = document.getelementbyid("thesubmit");
        submitbutton.addeventlistener("click", function(event) {
            var invalidityfield = form.queryselectorall(":invalid"),
                errormessage = form.queryselectorall(".error-message"),
                parent;

            for (var i = 0; i < errormessage.length; i++) {
                errormessage[i].parentnode.removechild(errormessage[i]);
            }
            for (var i = 0; i < invalidityfield.length; i++) {
                parent = invalidityfield[i].parentnode;
                parent.insertadjacenthtml("beforeend", "<div class='error-message'>" + invalidityfield[i].validationmessage + "</div>")
            }
            if (invalidityfield.length > 0) {
                invalidityfield[0].focus();
            }
        })
    }
    var form = document.getelementbyid("forms");
    replacevalidationui(form);
    </script>
</body>
</html>