html5表单验证 - 丿伊枫_H5之家 - 中国HTML5教程资源分享第一站

表单验证为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化。

下面展现浏览器自带的验证功能也可在移动端中查看：

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>html5 表单验证</title>
</head>
<body>
<form action="#" id="formValid" class="myform" novalidate="novalidate" onsubmit="return checkForm()">
    <fieldset>
        <div class="form-group">
            <label for="name">名称</label>
            <div>
                <input type="text" class="form-control" id="name" name="name" required/>
                <span class="form-error">不能为空</span>
            </div>
        </div>
        <div class="form-group">
            <label for="email">邮箱</label>
            <div>
                <input type="email" class="form-control"  id="email" name="email" required/>
                <span class="form-error">邮箱格式不正确</span>
            </div>
        </div>
        <div class="form-group">
            <label>省份</label>
            <select name="province" class="form-control">
                <option value="">请选择</option>
                <option value="s">四川</option>
                <option value="c">重庆</option>
            </select>
        </div>
        <input type="submit" class="btn" value="提交"/>
    </fieldset>
</form>
</body>
</html>

CSS部分：

　　 fieldset{border: 0;}
    .myform .form-control{
        display: block;
        padding: 5px;
        width: 100%
    }
    .myform input:focus:invalid + .form-error{
        display: inline;
    }
    .myform .form-error{
        display: none;
        position: absolute; 
        margin-top: .7em;
        padding: 1px 2px;
        color: #fff;
        font-size: .875rem;
        background: #f40;
    }
    .myform .form-error:after{
        position: absolute;
        content: "";
        top: -.5em;
        left: .5em;
        z-index: 100;
        display: inline-block;
        width: 0;
        height: 0;
        vertical-align: middle;
        border-bottom: .5em solid #f40;
        border-right: .5em solid transparent;
        border-left: .5em solid transparent;
        border-top: 0 dotted;
        transform: rotate(360deg);
        overflow: hidden;
    }
    .btn{
        padding: 5px 20px;
     }

JavaScript部分：

    function checkForm(){
        var myform = document.getElementById("formValid");
        return check(myform.elements);
    }
    function check(eles){
        var ele;
        for(var i = 0;i<eles.length;i++){
            ele = eles[i];
            if(ele.nodeName == "SELECT"){
                if(!ele.selectedIndex){
                    alert("请选择省份");
                    return false;
                }
            }else if(ele.name){
                if(!ele.checkValidity()){
                    ele.focus();
                    return false;
                }
            }
        }
        return true;
    }