前端：JS/33/实例：表单验证

实例：表单验证

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实例_表单验证</title>
</head>
<script type="text/javascript">
    //username模块
    function focus_username() {//username表单获取焦点时的函数
        var resultObj = document.getElementById("result_username");//获取id=result_username的对象
        resultObj.style.color = "gray";//提示信息单元格的颜色
        resultObj.innerHTML = "请输入你的用户名";
        document.form1.usetname.style = "border:1px solid red;background-color:#f0f0f0";//更改边框颜色
    }
    function blur_username() {//username的验证函数
        var resultObj = document.getElementById("result_username");
        //用户名验证
        if (document.form1.username.value == "") {
            resultObj.innerHTML = "用户名不能为空";
            resultObj.style.color = "red";//字体颜色为红色
            return false;
        } else if (document.form1.username.value.length < 5 || document.form1.username.value.length > 20) {
            resultObj.innerHTML = "<font color ='red'>用户名长度必须介于5-20字符之间</font>";
            return false;
        } else {
            resultObj.innerHTML = "<img src='images/th11.jpg'/>";
            return true;
        }
    }
    //password模块
    function focus_user_password() {
        var resultObj = document.getElementById("result_password");
        resultObj.style.color = "gray";
        resultObj.innerHTML = "请输入你的密码";
        document.form1.focus_user_password.style = "border:1px solid red;background-color:#f0f0f0";
    }
    function blur_user_password() {
        var resultObj = document.getElementById("result_password");
        //密码验证
        if (document.form1.user_password.value.length < 5 || document.form1.user_password.value.length > 20) {
            resultObj.innerHTML = "密码的长度必须介于5-20之间";
            return false;
        } else if (document.form1.user_password.value == "") {
            resultObj.inner = "密码不能为空";
            return false;
        } else {
            resultObj.innerHTML = "<img src='images/th11.jpg' />";
            return true;
        }
    }
    //form提交前最后的验证函数
    function chlick_form() {
        //最终验证是否可以提交
        if (blur_user_password() && blur_username()) {
            alert("验证成功，正在上传");
            return true;
        }
        alert("用户名或密码输入不合法");
        return false;
    }
</script>

<body>
    <form name="form1" method="post" action="login.php" οnsubmit="return chlick_form()">
        <table width="500" border="1" align="center" rules="all">
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" οnfοcus="focus_username()" οnblur="blur_username()" /></td>
                <td>
                    <div id="result_username"></div>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="user_password" οnfοcus="focus_user_password()"
                        οnblur="blur_user_password()" /></td>
                <td>
                    <div id="result_password"></div>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2">
                    <!-- 合并二个单元格 -->
                    <input type="submit" value="提交表单" />
                    <input type="reset" value="重新填写" />
                </td>

            </tr>
        </table>
    </form>

</body>

</html>

显示效果如下：
合法输入的情况：

不合法输入的情况：

@沉木