表单校验 “灰白字提示”

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_34221276

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量124

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Dylanblogs/p/4383913.html

版权


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>表单校验 “灰色字提醒录入”</title>
    <style type="text/css">
        body
        {
            overflow-y: auto;
            overflow-x: hidden;
        }
        
        table.altrowstable
        {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #a9c6c9;
            border-collapse: collapse;
        }
        table.altrowstable th
        {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #a9c6c9;
            text-align: center;
        }
        table.altrowstable td
        {
            border-width: 1px;
            padding: 10px;
            border-style: solid;
            border-color: #a9c6c9;
            font-family: "宋体";
            text-align: center;
        }
    </style>
    <script type="text/javascript">


        //        #region       封装方法


        // 初始化遮层提示
        function initCover(formid) {
            var elements = document.forms[formid].elements, ele, vMsg;
            for (var i = 0, len = elements.length; i < len; i++) {
                ele = elements[i];
                vMsg = ele.getAttribute("missingmessage");
                addEvent(ele, "blur", (function (ele) {
                    return function () {
                        var val = ele.value, vMsg = ele.getAttribute("missingmessage");
                        if (typeof (vMsg) != "undefined") {
                            if (ele.value == '') {
                                ele.value = vMsg;
                                ele.style.color = '#999'
                            }
                        }
                    }
                })(ele));
                addEvent(ele, "focus", (function (ele) {
                    return function () {
                        var val = ele.value, vMsg = ele.getAttribute("missingmessage");
                        if (typeof (vMsg) != "undefined") {
                            if (ele.value == vMsg) {
                                ele.value = '';
                                ele.style.color = '';
                            }
                        }
                    }
                })(ele));
                if (!isNullOrEmpty(vMsg)) {
                    // 遮层初始化显示
                    ele.value = vMsg;
                    ele.style.color = '#999'
                }
            }

        }

        // 遮层校验
        function coverValidation(formid) {
            var elements = document.forms[formid].elements, ele, vMsg, num;
            num = 0;
            for (var i = 0, len = elements.length; i < len; i++) {
                ele = elements[i];
                var val = ele.value, vMsg = ele.getAttribute("missingmessage");
                if (!isNullOrEmpty(vMsg)) {
                    if (ele.value == vMsg) {
                        ele.style.color = "red";
                        num++;
                    }
                }
            }
            return num > 0 ? false : true;
        }

        //        #endregion 

        //给控件附加事件
        function addEvent(ele, type, func) {
            window.attachEvent ? ele.attachEvent("on" + type, func) : ele.addEventListener(type, func);
        }

        // #region      js对象是否为空

        // 判断js对象是否为空
        function isNullOrEmpty(obj) {
            if (obj != null && typeof obj != "undefined" && obj.length > 0) {
                return false;
            } else {
                return true;
            }
        }
        // 判断js对象是否可以聚焦
        function isFocusable(ele) {
            if (ele.style.display == 'none')
                return false;
            if (ele.type == 'hidden')
                return false;
            if (!ele.style.visibility)
                return false;
            return true;
        }
        // #endregion

        window.onload = function () {

            // 初始化
            initCover("formTest");

            // 默认焦点
            document.getElementById("submit").focus();
        }
        

    </script>
</head>
<body>
    <form id="formTest" action="">
    <table class="altrowstable" cellpadding="0" cellspacing="0" id="tbApply" style="width: 95%;">
        <tr>
            <th>
                <font color="red">*</font>标题：
            </th>
            <td>
                <input id="resTitle" type="text" name="resTitle" missingmessage="标题如：关于“XXXX“活动"
                    style="width: 720px;" value="" />
            </td>
        </tr>
        <tr>
            <th>
                <font color="red">*</font>单位：
            </th>
            <td>
                <input id="resUnit" type="text" name="resUnit" title="单位" missingmessage="单位如：XXXX单位"
                    value="" style="width: 720px;" />
            </td>
        </tr>
        <tr>
            <th>
                <font color="red">*</font>详细地址：
            </th>
            <td>
                <input id="resAddress" type="text" name="resAddress" title="详细地址" missingmessage="填写详细地址"
                    style="width: 720px;" value="" />
            </td>
        </tr>
    </table>

    <div style="text-align: center; padding: 10px; width: 93%">
        <br />
        <input id="submit" type="button" value="提交申请" οnclick="if(coverValidation('formTest')){alert('提交成功！');}" />
    </div>
    </form>

    
</body>
</html>

以上代码可以直接放到html 页面直接运行

转载于:https://www.cnblogs.com/Dylanblogs/p/4383913.html