孤城丶

欢迎加入技术交流群: 467938355

JavaScript正则表达式表单验证

效果图:
表单

<!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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Crazy_Java1234/article/details/52354910
文章标签: 表单
个人分类: web前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭