html5自带表单认证体验提升及提醒气泡改动作用

日期:2020-10-13 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

html5自带表单认证

许多盆友开展表单认证的情况下,全是自身用jquery或js手工制作认证,或用1下jquery软件开展认证。由于大伙儿感觉html5自带认证并不是很好!实际上,如今html5自带表单认证,现阶段早已蛮强劲了。大家看来下我用纯html5写的1个表单认证吧!体验1下!

大伙儿感觉这个实际效果如何呢?

这个实际效果的精粹是加了3个照片!

.myform select:required,
.myform input:required,
.myform textarea:required {
    background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/star.jpg) no-repeat 99% center;
}
.myform select:required:valid,
.myform input:required:valid,
.myform textarea:required:valid {
    background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/right.png) no-repeat 99% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.myform select:focus:invalid,
.myform input:focus:invalid,
.myform textarea:focus:invalid {
    background: #fff url(http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/error.png) no-repeat 99% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

随后做了1个监视恶性事件:

oninvalid="this.setCustomValidity('请键入正确的号码');" oninput="setCustomValidity('')"

认证登陆密码是不是1致的情况下,用了1个js

function checkPassword() {
    var pass1 = document.getElementById("Password");
    var pass2 = document.getElementById("Repassword");

    if (pass1.value != pass2.value)
        pass2.setCustomValidity("两次键入的登陆密码不配对");
    else
        pass2.setCustomValidity("");
}

这样就进行了实际效果!

倘若你感觉,这个自带的气泡也很不好看!以下图: 我想换掉!

在谷歌29以前的版本号,大家是能够用伪元向来改动气泡!

::-webkit-validation-bubble { min-width:152px; margin-top: ⑴px;}
::-webkit-validation-bubble-arrow { border: 1px solid #F7CE39; background: #FFFBC7; /* position:relative; */ top: 4px; left: 0px; }
::-webkit-validation-bubble-arrow-clipper { text-align: center; }
::-webkit-validation-bubble-heading { color: #444; }
::-webkit-validation-bubble-message { border: 1px solid #F7CE39; background: #FFFBC7; border-radius: 3px; }
::-webkit-validation-bubble-text-block { font-size: 12px; }

可是呢,这个方式后边被废料掉了!你会发现改动气泡沒有反映!那末如何改动气泡款式呢?这里就略微不便1些了!思路大约是大家先阻拦默认设置气泡,随后建立新的气泡!

阻拦默认设置气泡

<form>
    <input required>
    <button>Submit</button>
</form>
<script>
    document.querySelector( "input" ).addEventListener( "invalid",
        function( event ) {
            event.preventDefault();
        });
</script>

建立新的UI

编码大概以下:

function replaceValidationUI( form ) {
    //阻拦气泡
    form.addEventListener( "invalid", function( event ) {
        event.preventDefault();
    }, true );
    // 适用Safari, iOS Safari, Android 访问器
    // 默认设置递交报表
    form.addEventListener( "submit", function( event ) {
        if ( !this.checkValidity() ) {
            event.preventDefault();
        }
    });
    // 新增不正确提醒的器皿
    form.insertAdjacentHTML( "afterbegin", "<ul class='error-messages'></ul>" );
    var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );
    submitButton.addEventListener( "click", function( event ) {
        var invalidFields = form.querySelectorAll( ":invalid" ),
            listHtml = "",
            errorMessages = form.querySelector( ".error-messages" ),
            label;
        for ( var i = 0; i < invalidFields.length; i++ ) {
            label = form.querySelector( "label[for=" + invalidFields[ i ].id + "]" );
            listHtml += "<li>" + 
                label.innerHTML +
                " " +
                invalidFields[ i ].validationMessage +
                "</li>";
        }
        // 把不正确的信息内容放到不正确器皿里边
        errorMessages.innerHTML = listHtml;
        // 给第1个不正确的input选定
        // 不正确信息内容器皿显示信息
        if ( invalidFields.length > 0 ) {
            invalidFields[ 0 ].focus();
            errorMessages.style.display = "block";
        }
    });
}
// 更换form中全部的认证UI
var forms = document.querySelectorAll( "form" );
for ( var i = 0; i < forms.length; i++ ) {
    replaceValidationUI( forms[ i ] );
}

总结

以上所述是网编给大伙儿详细介绍的html5自带表单认证体验提升及提醒气泡改动作用,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!