最简单的表单验证

发表于:2015-07-12 15:27:49 | 阅读数:--次| 作者:js,javascript

摘要：1 2 3 4 5 最简单表单验证 6 9 10 11 12 账号：13 密码：14 确认：15 16 17 45 46

1 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最简单表单验证</title>
    <style>
        form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius:10px;}
    </style>
</head>
<body>
    <form action="" method="post">
        账号：<input type="text" name="" id="userid"><br/><br/>
        密码：<input type="password" name="" id="userpwd"><br/><br/>
        确认：<input type="password" name="" id="userrepwd"><br/><br/>
        <input type="submit" value="注册" onclick="return eg.regCheck();">
    </form>
<script>
    //该表单只验证输入的文本域是否为空
    //声明一个对象，当作命名空间使用
    var eg = {};
    //在eg对象基础上添加一个公共函数用来获取页面id元素，减少代码量，提高代码复用率
    eg.getId = function(id){
        return document.getElementById(id);                //此处id运行时接受参数，不能加‘’引号
    };
    //在eg对象基础上定义表单验证函数
    eg.regCheck = function(){
        var uid = eg.getId('userid');
        var upwd = eg.getId('userpwd');
        var upwd2 = eg.getId('userrepwd');
        if (uid.value == '') {
            alert('账号不能为空！');
            return false;
        };
        if (upwd.value == '') {
            alert('密码不能为空！');
            return false;
        };
        if (upwd2.value != upwd.value) {
            alert('两次密码输入不一致！');
            return false;
        };
        return true;
    };
</script>
</body>
</html>