html5 校验 输入框 html必填验证

一、HTML5基本表单验证特性介绍

1. 必填：required。写在input上。
2. 鼠标聚焦：

1. 刷新时聚焦：autofocus。写在input上。
2. 点击提示文字，聚焦到输入框：标题和input

<!-- 方法一：使用label标签包裹全部  -->     
<label>
    工号：
    <input type="text" name="工号" placeholder="请输入工号">
</label>

<!-- 方法二：使用for和id  -->
<label for="jobNumber">工号：</label>
<input type="text" name="工号" placeholder="请输入工号" id="jobNumber">

1. 表单不验证，解除required等：

1. novalidate，写在form上。
2. formnovalidate，写在input上。

2. 表达验证：pattern=“正则表达式 ”

1. 正则表达式学习推荐：https://deerchao.cn/tutorials/regex/regex.htm

3. 历史记录联想：autocomplete=“on/off”
4. 表单下拉提示框:注意list="province"和id=“province”

<input type="text" list="province">
<dataList id="province">
    <option value="湖北省"></option>
    <option value="湖南省"></option>
    <option value="安徽省"></option>
    <option value="江苏省"></option>
</dataList>

1. search伪类元素美化
   search在谷歌浏览器中自带叉叉图标，点击清除所有文本内容 修改图标样式，不推荐在移动端使用

<input type="search" name="search" id="search">

<style>
input[type="search"]::-webkit-search-cancel-button {
    /* 不显示图标 */
    -webkit-appearance: none;
    /* 伪类元素的美化，虽然不好看，意思get到就行 */
    height: 15px;
    width: 15px;
    background-color: red;
}
</style>

1. number表单

1. 设置最大长度，无法使用maxlength等，以下使用js方法

<input type="number" id="number" oninput="checkLength(this,5)">

<script>
function checkLength(obj, length) {
    if (obj.value > length) {
        obj.value = obj.value.substr(0, length);
    }
}
</script>

1. 设置步长:点击按钮增减10

<input type="number" id="number" step="10">

1. 提交表单时，设置小数:step=“0.01”，保留两位小数

<input type="number" value="2.56" id="number" step="0.01">

1. 去掉数字表单上下箭头：伪类元素

<style>
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }
</style>

二、HTML5约束验证API

1. validity

2. checkValidity（）方法：全部约束条件满足，返回true，否则返回false。

1. 是否满足邮箱格式,输出”邮箱地址正确“

<input type="email" name="email" id="emails" value="[e-mail]">

<script>
    if (emails.checkValidity()) {
        console.log("邮箱地址正确");
    } else {
        console.log("邮箱地址错误");
    }
</script>

1. 必填项不填写，输出：”不符合“

<input type="text" id="username" required value="">

<script>
    if (username.checkValidity()) {
        console.log("符合");
    } else {
        console.log("不符合");
    }
</script>

#####3. setCustomValidity（）方法：设置自定义验证信息，用于即将实施与验证的约束来覆盖预定义的信息

小案例:两个条件，首先这是一个必填项required，其次必须是四个数字，pattern给了约束

<form>
    <input type="text" required pattern="^\d{4}$" placeholder="请输入代码" oninput="check(this)">
    <input type="submit" value="验证">
</form>

当我们验证时，浏览器会有预定义提示信息，如果我们需要改变验证信息，则使用setCustomValidity（）方法。

首先给表单一个输入时的函数，与上述的validity的两个属性相结合完成这个函数，分别是valueMissing属性和patternMismatch属性

<script>
        function check(obj) {
            console.log(obj.validity);
            var it = obj.validity;
            if (it.valueMissing === true) {
                obj.setCustomValidity("这是必填字段");
            } else {
                if (it.patternMismatch === true) {
                    obj.setCustomValidity("请输入4个数字");
                } else {
                    obj.setCustomValidity("输入正确");
                }
            }
        }
    </script>

三、HTML5自带验证美化

1. 表单必填或选填设置样式

input:required {
    background-color: antiquewhite;
}

select:optional {
    background-color: indianred;
}

2. input下的label。::after——在选定的元素的后面插入内容

<input type="name" required><label for="">name:</label></input>

input:required+label::after {
    content: "(必填)";
}

3. 元素获取焦点时，输入框的样式（高亮等样式）

1. 取消表单的高亮显示

input:focus {
    outline: 0;
}

1. 设置选填的表单的输入框样式

input:optional:focus {
    box-shadow: 0 0 3px 1px #aa0088;
}

3. submit按钮被鼠标触摸时改变样式

input[type="submit"]:hover {
    background-color: salmon;
}

3. 输入框和标题动画及验证

<div class="container">
    <input type="email" id="mail" required placeholder="输入邮箱">
    <span class="title">邮箱</span>
    <label for="mail"></label>
</div>

1. 利用子绝父相设置标题位置，鼠标获取焦点或者经过表单时，设置动画样式。代码2~30行
2. 利用表单验证，判断输入内容是否符合邮箱格式，显示相应提示信息和边框样式。代码32-43行
3. 小知识点：

<style>
        .container {
            margin: 100px;
            position: relative;
        }
        input {
            outline: 0;
            border: 1px solid gray;
            width: 140px;
            height: 30px;
            line-height: 30px;
            text-indent: 36px;
            border-radius: 5px;
        }
        .title {
            position: absolute;
            line-height: 30px;
            height: 30px;
            left: 2px;
            top: 2px;
            transition: all .3;
        }
        input:focus,
        input:hover {
            text-indent: 2px;
        }
        input:focus+.title,
        input:hover+.title {
            transform: translateX(-120%);
        }

        input:valid~label::after {
            content: "邮箱格式正确";
        }
        input:invalid~label::after {
            content: "邮箱格式错误";
        }
        input:valid {
            border: 2px solid green;
        }
        input:invalid {
            border: 2px solid red;
        }
    </style>