HTML5表单验证（4个实用的表单美化案例）

前端开发作者： 2024-08-25 15:30:02

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

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

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

         list="tips">
        dataList id>
            option value="erwerewr"option="erwerew2r"</dataList>

    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);
        }
    }

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

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

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

>纯CSS表单验证美化（invalid和valid）应用案例100px
            positionrelative
        input 1px solid #999140px
            height30px
            line-heighttext-indent36pxtransition all .3s
            border-radius5px
        span.titleabsolute 30px
            left2px
            top
            transitionall .3s
            text-indent
        input:focus+span.title,input:hover+span.title
            transformtranslateX(-120%)
        
        input:valid ~label::after "你输入正确！"
        
        input:invalid ~label::after "你邮箱错误！"
        
        input:valid1px solid green
        input:invalid1px solid red="mail" type required placeholder="输入邮箱"span ="title"spanlabel for="mail">

="utf-8"http-equiv="X-UA-Compatible" content="IE=edge">html5表单美化综合案例="viewport"="initial-scale=1,maximum-scale=1"
.onelist 
    margin 10px 0 5px 12px;


.onelist label 
    width 80px
    display inline-block


.onelist input,.onelist select 
    height 25px
    line-height 220px
    border-radius 3px
    border 1px solid #e2e2e2

.onelist input[type="submit"]  150px

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  #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  #fff url(../img/error.png) no-repeat 99% center 0 0 5px red red
    outline red solid 1px}
>

="myform" onsubmit="return checkForm();" method="post"="onelist"="UserName">手机号="UserName"="请输入手机号码"="^1[0-9]{10}$" required oninvalid="this.setCustomValidity('请输入正确的号码');" oninput="setCustomValidity('')"="Password">密码="Password"="password"="6~20位" class="^[a-zA-Z0-9]\w{5,19}$"="this.setCustomValidity('请输入正确密码');"="setCustomValidity('')" onchange="checkPassword()"="Repassword">确认密码="Repassword"="确认密码" required onchange>了解方式="konw">==请选择==="1">搜索引擎="2">朋友圈="3">朋友推广="4">广告投放="提交"script ="text/javascript">
    function checkPassword() {
        var pass1 = document.getElementById("Password);
         pass2 Repassword);

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

="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">表单验证默认样式修改
    .onelineline-height 1.5margin10px auto
    .oneline labelwidth 15pxfont-size14pxfont-family "Microsoft Yahei"display inline-block
    .oneline .sinput60%heightborder-radius 6pxborder1px solid #e2e2e2
    .oneline input[type="submit"]margin-left20px80pxbackground-color#5899d0color
    .error-messagered font-size12px108px="forms"="oneline"="name">用户名:="sinput"="email">Email:="提交"="thesubmit" replaceValidationUI(form) {

        form.addEventListener(invalid(event) {
            event.preventDefault();
        },1)">true);

        form.addEventListener(submit(event) {
             (!this.checkValidity()) {
                event.preventDefault();
            }
        },1)"> submitButton thesubmit);
        submitButton.addEventListener(click inValidityField  form.querySelectorAll(:invalid),errorMessage .error-messagefor i = ; i < errorMessage.length; i++) {
                errorMessage[i].parentNode.removeChild(errorMessage[i]);
            }
             inValidityField.length; i) {
                parent  inValidityField[i].parentNode;
                parent.insertAdjacentHTML(beforeend<div class='error-message'>" + inValidityField[i].validationMessage + </div>)
            }
             (inValidityField.length > ) {
                inValidityField[].focus();
            }
        })
    }
     form forms);
    replaceValidationUI(form);
    >