互聯網 - 大數據

<form action="" method="post">
        <fieldset class="login">
            <legend>Login information</legend>
            <label for="userName" class="hover">UserName:</label>
            <input type="text" id="userName" class="required text" /><br />
            <label for="password" class="hover">Password:</label>
            <input type="text" id="password" class="required text" /><br />
        </fieldset>
        <fieldset>
            <legend>Personal Information</legend>
            <label for="name" class="hover">Name:</label>
            <input type="text" id="name" class="required text" /><br />
            <label for="email" class="hover">Email:</label>
            <input type="text" id="email" class="required text email" /><br />
            <label for="date" class="hover">Date:</label>
            <input type="text" id="date" class="required text" /><br />
            <label for="url" class="hover">Website:</label>
            <input type="text" id="url" class="url text" value="http://" /><br />
            <label for="phone" class="hover">Phone:</label>
            <input type="text" id="phone" class="phone text" /><br />
            <label for="age" class="hover">Age:</label>
            <input type="checkbox" id="age" name="age" value="yes" /><br />

            <input type="submit" value="Submit Form" class="submit" />
        </fieldset>
    </form>

        var errMsg = {
            //檢查特定字段是否必填
            required: {
                msg: 'This field is required.',
                test: function (obj, load) {
                    return obj.value.length > 0 && obj.value != obj.defaultValue;
                }
            },
            //確保字段內容是正確的email地址
            email: {
                msg: 'Not a valid email address.',
                test: function (obj) {//確保有內容的輸入并符合email地址的格式
                    return !obj.value || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
                }
            },
            //確保字段內容是電話號碼并將其自動格式化
            phone: {
                msg: 'Not a valid phone number',
                test: function (obj) {
                    var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
                    if (m) {
                        obj.value = "(" + m[1] + ")" + m[2] + "-" + m[3];
                        return !obj.value || m;
                    }
                }
            },
            //確保字段內容符合MM/DD/YYYY的時間格式
            date: {
                msg: 'Not a valid date.',
                test: function (obj) {
                    return !obj.value || /^\d{2}\/d{2}\/d{2,4}$/.test(obj.value);
                }
            },
            url: {
                msg: 'Not a valid URL.',
                test: function (obj) {
                    return !obj.value || obj.value == 'http:://' ||
                        /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
                }
            }

        };
        //隱藏當前正在顯示的任何錯誤信息
        function hideErrors(elem) {
            var next = elem.nextSibling;//獲取當前字段的下一個元素
            if (next && next.nodeName == 'UL' && next.className == 'errors') {//如果下一個元素是ul并有class為errors
                elem.parentNode.removeChild(next);//刪掉它
            }
        }
        //顯示表單內特定字段的錯誤信息
        function showErrors(elem, errors) {
            var next = elem.nextSibling;//獲取當前字段的下一個元素
            if (next && (next.nodeName != 'UL' || next.className != 'errors')) {
                next = document.createElement('ul');
                next.className = 'errors';
                elem.parentNode.insertBefore(next, elem.nextSibling);
            }
            //有一個包含錯誤的容器引用，我們可以遍歷所有的錯誤信息
            for (var i = 0; i < errors.length; i++) {
                var li = document.createElement('li');//為每一個錯誤信息創建新的li包裹器
                li.innerHTML = errors[i];
                next.appendChild(li);//并插入到dom中
            }
        }
        //驗證表單所有字段的函數
        //form參數應是一個表單元素的引用 
        //load參數應該是一個布爾值  用以判別驗證函數在頁面加載時執行還是動態執行
        function validateForm(form, load) {
            var valid = true;
            for (var i = 0; i < form.elements.length; i++) {//遍歷表單的所有字段的一個數組
                hideErrors(form.elements[i]);//先將所有錯誤信息隱藏
                if (!validateField(form.elements[i], load)) {
                    valid = false;
                }
            }
            return valid;//如果字段是不正確的內容，則返回false,反之則返回true;
        }
        //驗證單個字段的內容
        function validateField(elem, load) {
            var errors = [];
            for (var name in errMsg) {
                var re = new RegExp("(^|\\s)" + name + "(\\s|$)");        
                if (re.test(elem.className) && !errMsg[name].test(elem, load)) {//如果沒有通過驗證，把錯誤信息增加到列表中
                    errors.push(errMsg[name].msg);
                }
            }
            if (errors.length) {//如果存在錯誤信息，則顯示出來
                showErrors(elem, errors);
            }
            return errors.length > 0;
        }
       
        function getInputsByName(name) {
            var result = [];//匹配的input元素的數組
            result.numChecked = 0;//追蹤被選中元素的數量
            var input = document.getElementsByTagName('input');
            for (var i = 0; i < input.length; i++) {
                if (input[i].name == name) {//找出所有指定name的字段
                    result.push(input[i]);//保存結果
                    if (input[i].checked) {//記錄被選中字段的數量
                        result.numChecked++;
                    }
                }
            }
            return result;//返回匹配的字段集合
        }
        window.onload = function () {
            var form = document.getElementsByTagName('form')[0];
            form.onsubmit = function () {
                validateForm(form, 'submit');
                return false;
            }
        }