关闭

JavaScript正则表达式表单验证

标签: 表单
153人阅读 评论(0) 收藏 举报
分类:

效果图:
表单

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>表单验证</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

    <script>
        function myfunction(){
            var username = document.getElementById('username').value;
            var userpassword = document.getElementById('userpassword').value;
            var gender = document.getElementById('gender').value;
            var realname = document.getElementById('realname').value;
            var age = document.getElementById('age').value;

            var regusername = /^[a-zA-z]\w{5,11}$/;
            var regpassword = /^[a-zA-Z0-9]{5,11}$/;
            var reggender = /^['男'|'女'|'中']$/;
            var regname = /^[\u4e00-\u9fa5]{2,4}$/;
            var age = Number(age);

            //验证用户名
            if(regusername.test(username)){
                //验证密码
                if(regpassword.test(userpassword)){
                    //验证性别
                    if(reggender.test(gender)){
                        //验证姓名
                        if(regname.test(realname)){
                            //验证年龄
                            if(age<=0 || age>150){
                                alert("年龄错误!");
                            }else{
                                alert("验证通过");
                            }
                        }else{
                            alert("姓名错误");
                        }
                    }else{
                        alert("性别格式错误");
                    }
                }else{
                    alert("密码格式错误");
                }
            }else{
                alert("账号格式错误!");
            }
        }
    </script>
</head>
<body>

<div style="width: 500px;height: 600px;margin: 0 auto;margin-top: 100px">
<form class="form-horizontal" role="form">
       <!-- 账号-->
    <div class="form-group">
        <label class="col-sm-2 control-label">账号:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="username" placeholder="请输入账号...">
        </div>
    </div>
    <!-- 密码-->
    <div class="form-group">
        <label class="col-sm-2 control-label">密码:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="userpassword" placeholder="请输入密码...">
        </div>
    </div>
    <!-- 性别-->
    <div class="form-group">
        <label class="col-sm-2 control-label">性别:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="gender" placeholder="请输入性别..">
        </div>
    </div>
    <!-- 姓名-->
    <div class="form-group">
        <label class="col-sm-2 control-label">姓名:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="realname" placeholder="请输入姓名...">
        </div>
    </div>
    <!-- 年龄-->
    <div class="form-group">
        <label class="col-sm-2 control-label">年龄:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="age" placeholder="请输入年龄...">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10 text-right">
            <button type="submit" class="btn btn-primary" onclick="myfunction()">登录</button>
        </div>
    </div>
</form>
</div>
</body>
</html>
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58475次
    • 积分:1169
    • 等级:
    • 排名:千里之外
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:11条
    文章分类
    最新评论