Html5 表单验证

2019-08-02 本文已影响0人 3132

基本表单验证特性介绍

背景文字
placeholder="请输入用户名"
html5 表单中新增了以下类型

email、URL、number、range、date（date, month, week, time, datetime, datetime-local ）、search、color、tel等

文本矿中，输入一次，下一次再输入会自动提示的特性
autocomplete="on/off"
下拉选择
list 与 datalist
初始化页面后，让input自动获得焦点
autofocus="autofocus"
设置表单元素必填
required
表单验证使用正则
pattern="^\d{5}[number]$"
html5 表单中设置了必填，提交表单的时候做到不验证的特性
novalidate(from 中设置)、formnovalidate(input 按钮中设置)

<from action="" method="post" enctype="multipart/form-data" novalidate="novalidate" ></from>

<input type="submit" formnovalidate="formnovalidate">

约束验证API

willValidate 属性
元素约束是否被符合，未符合返回false
validity 属性
ValidityState对象，表示当前所处验证状态

validityState对象

validationMessage 属性
描述相关约束的失败信息
checkValidity() 方法
若元素没有满足它的任意约束，返回false，其它情况返回 true
setCustomValidity() 方法
设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的提示信息

html
<form name="test" action="" method="post">
    <input type="text" required pattern ="^\d{4}$" oninput="checkit(this)" placeholder="请输入">
    <input type="submit" value="验证">
</from>

script
<script>
function checkit(obj){
    var it = obj.validity;
    if(true === it.valueMissing){
        obj.setCustomValidity("不能为空！");
    }else{
        if(true === it.patternMismatch){
            obj.setCustomValidity("必须是4个数字");
        }
    }
</script>

Html 5 自带验证美化

伪类及css选择器
:required 和 :optional
匹配必填元素与选填元素
:in-range 和 :out-of-range
范围之内与不在范围之内（与最大值最小值对应）
:valid 和 :invalid
符合验证与不符合验证
:read-only 和 :read-write
匹配只读与只写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
    <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="提交">
    </div>
</form>

<script>
        function replaceValidationUI( form ) {
        // 为from表单增加"验证失败"监听事件，并且阻止默认气泡
        form.addEventListener( "invalid", function( event ) {
            event.preventDefault();
        }, true );
            //监听提交事件，验证不通过时，阻止默认提交事件
        form.addEventListener( "submit", function( event ) {
            if ( !this.checkValidity() ) {
                event.preventDefault();
            }
        });

        var submitButton = form.querySelector( "button:not([type=button]), input[type=submit]" );

        submitButton.addEventListener( "click", function( event ) {
            //  获取所有不符合的验证信息，获取所有错误信息(为了清除错误信息)，定义变量插入
            var invalidFields = form.querySelectorAll( ":invalid" ),
                errorMessages = form.querySelectorAll( ".error-message" ),
                parent;

          //  删除错误信息的父类
            for ( var i = 0; i < errorMessages.length; i++ ) {
                errorMessages[ i ].parentNode.removeChild( errorMessages[ i ] );
            }
             //  获取没有通过验证的错误信息，为错误信息的父类添加我们自己的样式
            for ( var i = 0; i < invalidFields.length; i++ ) {
                parent = invalidFields[ i ].parentNode;

             //  insertAdjacentHTML() 知识点
                parent.insertAdjacentHTML( "beforeend", "<div class='error-message'>" + 
                    invalidFields[ i ].validationMessage +
                    "</div>" );
            }
            //  如果有错误信息，第一个定位焦点
            if ( invalidFields.length > 0 ) {
                invalidFields[ 0 ].focus();
            }
        });
    }
        //  通过css选择器获取所有form表单
    var forms = document.querySelectorAll( "form" );
    for ( var i = 0; i < forms.length; i++ ) {
        replaceValidationUI( forms[ i ] );
    }
    
</script>

Html5 表单验证

猜你喜欢

热点阅读