表单校验demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function check() {
            //教研名字
            var firstnamev = document.getElementById('firstname').value;
            if (firstnamev == '') {
                alert('名字不能为空');
                return false;
            } else {
                for (var i = 0; i < firstnamev.length; i++) {
                    var c = firstnamev[i];
                    if (c >= 0) {
                        alert('名字不能包含数字');
                        return false;
                    }
                }
            }
            //教研姓氏
            var lastnamev = document.getElementById('lastname').value;
            if (lastnamev == '') {
                alert('姓氏不能为空');
                return false;
            } else {
                for (var j = 0; j < lastnamev.length; j++) {
                    var cl = lastnamev[j];
                    if (cl >= 0) {
                        alert('姓氏不能包含数字');
                        return false;
                    }
                }
            }

            //校验邮箱
            var emailv = document.getElementById('email').value;
            if (emailv == '') {
                alert('邮箱不能为空!');
                return false;
            } else {
                var index1 = emailv.indexOf('@');//字符串中包含“@”
                var index2 = emailv.indexOf('.');//字符串中包含“.”
                if (index1 == -1 || index2 == -1) {//@,.不存在
                    alert('邮箱地址不合法!');
                    return false;
                } else if (index1 >= index2) {//@在.的后面,索引大于.
                    alert('邮箱地址不合法!');
                    return false;
                }
            }

            //校验密码
            var p = document.getElementById('password').value;
            if (p == '') {
                alert('密码不能为空!');
                return false
            } else if (p.length <= 3) {
                alert('密码长度小于6!');
                return false;
            }

            var chekpsdv = document.getElementById('check_password').value;
            if (chekpsdv == '') {
                alert('请再次输入密码');
                return false;
            }
            else if (chekpsdv != p) {
                alert('两次输入密码不一致');
                return false;
            }
        }
    </script>
</head>
<body>
<form action="do.html" onsubmit="return check();">
    名字:<input type="text" id="firstname"><br>
    姓氏:<input type="text" id="lastname"><br>
    邮箱:<input type="text" name="" id="email"><br>
    密码:<input type="txt" name="" id="password"><br>
    再次输入密码:<input type="txt" name="" id="check_password"><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

 

posted @ 2017-06-23 10:37  斯丢皮德曼  阅读(167)  评论(0编辑  收藏  举报