JavaScript 表单验证

最新推荐文章于 2024-04-21 15:33:35 发布

杨MAX洁

最新推荐文章于 2024-04-21 15:33:35 发布

阅读量886

点赞数 1

分类专栏： Web

本文链接：https://blog.csdn.net/Hpu_A/article/details/51355123

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="" href="">
    <title>表单验证</title>
    <script type="text/javascript">
        function check()
        {
            //姓名验证
            var name = document.getElementById("pname").value;
                    if(name=="")
                    {
                        alert("用户名不能为空！");
                        document.getElementById("pname").focus();
                        return false;
                    }
            //密码验证
            var password = document.getElementById("pwd").value;
                    if(password.length<7)
                    {
                        alert("密码不合法，长度至少为7位！");
                        document.getElementById("pwd").focus();
                        return false;
                    }
            //年龄验证
            var age = document.getElementById("page").value;
                    if(age == "" || isNaN(age) || age<0 ||age >100)
                    {
                        alert("请输入合法年龄！");
                        document.getElementById("page").focus();
                        return false;
                    }
            //邮箱验证
            var email = document.getElementById("pemail");
            var reg=/^([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[-_.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,6}$/;
           //邮箱验证见文尾
                    if(!reg.test(email.value))
                    {
                        alert("请输入有效邮箱!");
                        email.focus();
                        return false;
                    }
            return true;
        }
        
    </script>

    <style type="text/css">
        input
        {
            border:1px solid red;
            margin: 0px;
        }
    </style>
</head>

<body>
    <h1>表单验证</h1>
    <form action="" method="get" οnsubmit="return check()">
        用户名<input type="text" name="name" id="pname"/>
        <br>
        密码<input type="password" name="pwd" id="pwd"/>
        <br>
        性别<input type="radio" name="gender" checked="checked">男
                <input type="radio" name="gender" >女
        <br>
        年龄<input type="text" name="age" id="page"/>
        <br>
        邮箱<input type="text" name="email" id="peamil"/>
        <br>
        职业<select>
            <option value="1">学生</option>
            <option value="2">教授</option>
          <option value="3" >公务员</option>
    </select>
        <br>
        <input  type="reset" value="重置" name="reset"/>
        <input  type="submit" value="提交" name="submit"/>
        <br>
    </form>
</body>
</html>

http://blog.csdn.net/hpu_a/article/details/51365347