关闭

JavaScript正则表达式表单验证

标签: 表单
239人阅读 评论(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
查看评论

JavaScript表单验证和提交(结合正则表达式)

表单验证: 1> 在用户输入信息完成后,验证用户数据的数据是否符合某个要求,根据是否符合要求,提示不同的信息。 2>若用户输入的信息有一项不合格,则阻止表单提交。(注意:表单组件name属性值为非空时表单递交才能将组件的value值传出去. 所以一般添加表单组件时最好加上name属...
  • java_xxoo_android
  • java_xxoo_android
  • 2014-12-07 18:57
  • 1166

JavaScript使用正则表达式进行邮箱表单验证实例

*******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test(验证内容) 扩展:JavaScript中正则表达式对象(RegExp)存在3个方法 ...
  • rong0913
  • rong0913
  • 2016-01-22 17:54
  • 2710

表单验证中的各类正则表达式

验证:!reg.test(value) 邮箱: [javascript] view plain copy print? reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+...
  • zmx729618
  • zmx729618
  • 2016-04-22 16:38
  • 750

常用的表单正则表达式验证总结

1。^\d+$  //匹配非负整数(正整数 + 0)  2。^[0-9]*[1-9][0-9]*$  //匹配正整数  3。^((-\d+)|(0+))$  //匹配非正整数(负整数 + 0)  4。^-[0-9]*[1-9][0-9]*$  //匹配负整数...
  • TKWDmylove
  • TKWDmylove
  • 2015-08-17 17:08
  • 646

页面表单验证(正则表达式验证邮箱,正则表达式验证身份证,正则表达式验证手机号)

var reg = { user:/^[a-zA-Z]\w{4,9}$/, pwd:/^[\da-zA-Z]{6,18}$/, tel:/^1[34578]\d{9}$/, mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA...
  • gl0ry
  • gl0ry
  • 2017-03-05 21:43
  • 1372

正则表达式及js校验表单代码(注册页面)

校验表单             //用户名的规则:第一位是字母,只有由数字与字母组成,6位。     function checkName(){   ...
  • wyxqkkl
  • wyxqkkl
  • 2016-08-26 00:00
  • 4950

js用正则表达式来验证表单(比较齐全的资源),JS正则test()方法

在学习网页中的表单验证,顺便学习下正则表达式     在网上找了后发现了一个比较齐全的资源,稍微进行了一下排版     复制代码代码如下:     // 检查是否为有效的真实姓名,只能含有中文或大写的英文字母     f...
  • Baple
  • Baple
  • 2015-01-05 15:15
  • 9215

JavaScript - 表单验证实例

表单验证1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <...
  • wangzi11322
  • wangzi11322
  • 2015-04-26 14:01
  • 4882

javascript完整表单验证

html> html lang="en"> head> meta http-equiv="content-type" content="text/html"; charset="UTF-8"&g...
  • pangqiandou
  • pangqiandou
  • 2016-09-23 00:24
  • 1571

JavaScript 表单验证正则表达式大全

匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可...
  • heisefaqia
  • heisefaqia
  • 2016-04-21 16:53
  • 194
    个人资料
    • 访问:76971次
    • 积分:1368
    • 等级:
    • 排名:千里之外
    • 原创:61篇
    • 转载:0篇
    • 译文:0篇
    • 评论:16条
    文章分类