表单验证与无障碍设计-优快云博客

本文链接：https://blog.youkuaiyun.com/xiantouxu/article/details/77430309

问题：想要突出显示有错误数据的表单字段条目，并且想要确保突出显示对于所有的Web页面用户有效
解决方案：使用CSS突出显示输入错误的表单字段，并且使用 WAI-ARIA（Accessible Rich Internet Applications,可访问富Internet应用程序）标记来确保突出显示对于所有的用户可见
[aria-invalid]{background-color:#ffeeeee;}
对于需要验证的字段，将一个函数分配给表单字段的onchange事件处理程序，它将检查字段值是否有效。如果无效，弹出警告信息
对于必填的字段绑定字段的onblur事件

<!DOCTYPE html>
<html>
<head>
    <title>Validating Forms</title>
    <style type="text/css">
    [aria-invalid]{
        background-color: #ffeeee;
    }
    [role="alert"]{
        background-color: #ffcccc;
        font-weight: bold;
        padding: 5px;
        border:1px dashed #000;
    }
    div{
        margin: 10px 0;
        padding: 5px;
        width: 400px;
        background-color: #ffffff;
    }
    </style>
</head>
<body>
<form action="" id="testform">
    <div>
        <label for="firstfield">*First Field:</label><br>
        <input type="text" id="firstfield" name="firstfield" aria-required="true" required>
    </div>
    <div>
        <label for="secondfield">*Second Field:</label><br>
        <input type="text" id="secondfield" name="secondfield" aria-required="true" required>
    </div>
    <div>
        <label for="thirdfield">*Third Field:</label><br>
        <input type="text" id="thirdfield" name="thirdfield" aria-required="true" required>
    </div>
    <div>
        <label for="fourthfield">*Fourth Field:</label><br>
        <input type="text" id="fourthfield" name="fourthfield" aria-required="true" required>
    </div>
    <input type="submit" value="Send Data">
</form>
<script type="text/javascript">
document.getElementById("thirdfield").onchange=validateField;
document.getElementById("firstfield").onblur=mandatoryField;
document.getElementById("testform").onsubmit=finalCheck;

function removeAlert(){
    var msg = document.getElementById("msg");
    if(msg){
        document.body.removeChild(msg);
    }
}

function resetField(elem){
    elem.parentNode.setAttribute("style", "background-color:#ffffff");
    var valid = elem.getAttribute("aria-invalid");
    if(valid) elem.removeAttribute("aria-invalid");
}

function badField(elem){
    elem.parentNode.setAttribute("style", "background-color:#ffeeee");
    elem.setAttribute("aria-invalid", "true");
}

function generateAlert(txt){
    //创建新的文本和div元素，并且设置Aria和class值以及id
    var txtNd = document.createTextNode(txt);
    msg = document.createElement("div");
    msg.setAttribute("role", "alert");
    msg.setAttribute("id","msg");
    msg.setAttribute("class","alert");
    //给div添加文本，把div添加到文档
    msg.appendChild(txtNd);
    document.body.appendChild(msg);
}
function validateField(){
    //删除所有已有的alert值，不管其值是什么
    removeAlert();
    //检查数值,如果是数值
    if(!isNaN(this.value)){
        resetField(this);
    }else{
        badField(this);
        generateAlert("You entered an invalid value in Third Field."+"Only numeric values such as 105 or 3.13 are allowed");
    }
}
function mandatoryField(){
    //删除所有已有的alert值，不管其值是什么
    removeAlert();
    //检查数值,如果是数值
    if(!isNaN(this.value)){
        resetField(this);
    }else{
        badField(this);
        generateAlert("You must enter a value into First Field");
    }
}
function finalCheck(){
    removeAlert();
    var fields =document.querySelectorAll("[aria-invalid='true']");
    if(fields.length>0){
        generateAlert("You have incorrect fields entries that must be fixed "+
            "before you can sumbmit this  form");
        return false;
    }
}
</script>
</body>
</html>