JavaScript-表单检验

最新推荐文章于 2024-09-26 11:01:02 发布

zLanaDelRey

最新推荐文章于 2024-09-26 11:01:02 发布

阅读量263

点赞数

分类专栏：前端文章标签：表单前端

本文链接：https://blog.youkuaiyun.com/zLanaDelRey/article/details/79881654

版权

前端专栏收录该内容

30 篇文章

订阅专栏

提示表单内容为必填内容

<body>
    <form action="">
    <label for="box">昵称:</label><input type="text" id="box" required/></br>
    <label for="psw">密码：</label><input type="password" id="psw" required />
    <input type="submit" value="确定"/>
    </form>
</body>
<script>
//必填选项
var oId=document.getElementById("box");
oId.setCustomValidity("此内容为必填内容");
</script>

语法：

在input便签内写入required
<input type="text" required/>
<script>
var oId=document.getElementById("获取ID")；
oId.setCustomValidity("此内容为必填内容");
</script>

转载代码

<!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>
    <meta charset="UTF-8"/>
    <title>表单检测及表单提示</title>
    <style type="text/css">
    dl {
        font:normal 12px/15px Arial;
        position: relative;
        width: 350px;
    }
    dt {
        clear: both;
        float:left;
        width: 130px;
        padding: 4px 0 2px 0;
        text-align: left;
    }
    dd {
        float: left;
        width: 200px;
        margin: 0 0 8px 0;
        padding-left: 6px;
    }
    .hint {
        display: none;
        position: absolute;
        right: -250px;
        width: 200px;
        margin-top: -4px;
        border: 1px solid #c93;
        padding: 10px 12px;
        background: #ffc url("images/pointer.gif") no-repeat -10px 5px;
    }
    .hint .hint-pointer {
        position: absolute;
        left: -10px;
        top: 5px;
        width: 10px;
        height: 19px;
        background: url("images/pointer.gif") left top no-repeat;
    }
    </style>
    <script type="text/javascript">
        function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
        window.onload = func;
            } else {
                window.onload = function() {
                oldonload();
                func();
                }
            }
        }
        function prepareInputsForHints() {
        var inputs = document.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++){
        if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
        inputs[i].onfocus = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
        }
        inputs[i].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
        }
        }
        var selects = document.getElementsByTagName("select");
        for (var k=0; k<selects.length; k++){
        if (selects[k].parentNode.getElementsByTagName("span")[0]) {
        selects[k].onfocus = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
        }
        selects[k].onblur = function () {
            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
        }
        }
        }
        }
        addLoadEvent(prepareInputsForHints);
    </script>
    </head>
    <body>
        <p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>
        <dl>
            <dt>
                <label for="firstname">First Name:</label>
            </dt>
        <dd>
            <input name="firstname" id="firstname" type="text" />
            <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
        </dd>
        <dt>
            <label for="lastname">Last Name:</label>
        </dt>
        <dd>
            <input name="lastname" id="lastname" type="text" />
            <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>
        </dd>
        <dt>
            <label for="email">Email:</label>
        </dt>
        <dd>
            <input name="email" id="email" type="text" />
            <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>
        </dd>
            <dt><label for="year">Birth Year:</label></dt>
        <dd>
            <select id="year" name="year">
            <option value="">YYYY</option>
            <option value="1066">1066</option>
            <option value="1492">1492</option>
            <option value="1776">1776</option>
            </select>
            <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>
        </dd>
        <dt>
            <label for="username">Username:</label>
        </dt>
        <dd>
            <input name="username" id="username" type="text" />
            <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
        </dd>
        <dt>
            <label for="password">Password:</label>
        </dt>
        <dd>
            <input name="password" id="password" type="password" />
            <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span>
        </dd>
            <dt class="button"> </dt>
            <dd class="button">
            <input type="submit"class="button"value="Submit" />
        </dd>
        </dl>
</body>
</html>