jQuery数据验证 

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>数据验证</title>
  6     <script src="js/jquery-3.2.0.min.js"></script>
  7     <script>
  8 
  9         var reg=/\s+/g;//reg=正则表达式，\s空格，+ 任意多个
 10        $(function(){//页面加载完以后在执行代码段 等同于js中window.onload=function(){}
 11            $("#username").blur(function(){ //代码中的blur事件指:鼠标移开当前输入框，执行代码段
 12                var username=$(this).val();//username=鼠标当前指向的这个文本框的值
 13                username=username.replace(reg,"");//如果输入的文本框有多个空格，就用空字符串替代
 14                if(username==""){//判断文本框是否为空，为空就在旁边提醒
 15                    $("#span01").html("用户名不能为空").css("color","red");
 16                }else{
 17                    $("#span01").html("");
 18                }
 19            });
 20            $("#useremail").blur(function(){
 21               var useremail=$(this).val();
 22                useremail=useremail.replace(reg,"");
 23                if(useremail==""){
 24                    $("#span02").html("用户邮箱不能为空").css("color","red");
 25                }else{
 26                    $("#span02").html("");
 27                }
 28            });
 29            $("input[name='pwd']").blur(function () {
 30                var pwd=$(this).val();
 31                pwd=pwd.replace(reg,"");
 32                if(pwd==""){
 33                    $("#span03").html("用户密码不能为空").css("color","red");
 34                }else{
 35                    $("#span03").html("");
 36                }
 37            });
 38            $("input[name='tel']").blur(function(){
 39                var tel=$(this).val();
 40                tel=tel.replace(reg,"");
 41                if(tel==""){
 42                    $("#span04").html("电话号码不能为空").css("color","yellow");
 43                }else{
 44                    $("#span04").html("");
 45                }
 46            });
 47        });
 48         //验证数据，会写这个方法的主要原因还是因为，不写这个方法就可以避开文本框输入，点击提交还是会
 49         //,交给数据库做处理
 50        function checkit(){
 51            var username=$("#username").val();
 52            username=username.replace(reg,"");
 53            if(username==""){
 54                $("#span01").html("用户名不能为空").css("color","red");
 55                return  false;
 56            }else{
 57                $("#span01").html("");
 58            }
 59            //验证用户名的合法性
 60            var namepattern=/[\u4e00-\u9fa5]+/;
 61            if(namepattern.test(username)){
 62                $("#span01").html("用户名不能有中文字符").css("color","red");//jq对象可以有链式操作 css方法和html方法同时使用
 63                return false;
 64            }else{
 65                $("#span01").html("");
 66            }
 67            var useremail=$("#useremail").val();
 68            useremail=useremail.replace(reg,"");
 69            if(useremail==""){
 70                $("#span02").html("邮箱不能为空").css("color","red");
 71                return false;
 72            }else{
 73                $("#span02").html("");
 74            }
 75            //验证数据邮箱
 76            var emailpattern=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 77            if(!emailpattern.test(useremail)){
 78                $("#span02").html("邮箱格式不正确").css("color","red");
 79                return false;
 80            }else{
 81                $("#span02").html("");
 82            }
 83            var userpwd=$("input[name='pwd']").val();
 84            userpwd=userpwd.replace(reg,"");
 85            if(userpwd==""){
 86                $("#span03").html("密码不能为空").css("color","red");
 87                return false;
 88            }else{
 89                $("#span03").html("");
 90            }
 91            //验证密码
 92            var pwdpattren=/^[a-zA-Z0-9]*([a-zA-Z][0-9]|[0-9][a-zA-Z])[a-zA-Z0-9]*$/;//密码不能为纯数字
 93            if(!pwdpattren.test(userpwd)){
 94                $("#span03").html("用户密码不能只为纯数字或者密码").css("color","red");
 95                return false;
 96            }else{
 97                $("#span03").html("")
 98            }
 99            var usertel=$("input[name='tel']").val();
100            usertel=usertel.replace(reg,"");
101            if(usertel==""){
102                $("#span04").html("用户电话不能为空").css("color","red");
103                return false;
104            }else{
105                $("#span04").html("")
106            }
107            //验证用户电话
108            var telpattern=/^1[34578]\d{9}$/;
109            if(!telpattern.test(usertel)){
110                $("#span04").html("电话号码录入错误").css("color","red");
111                return false;
112            }else{
113                $("#span04").html("");
114            }
115 
116        }
117     </script>
118 </head>
119 <body>
120 <form name="form1" action="login.do" >
121 用户名:<input type="text" id="username"><span id="span01"></span><br>
122 邮箱：<input type="text" id="useremail"><span id="span02"></span><br>
123 密码:<input type="password" name="pwd"><span id="span03"></span><br>
124 电话号码:<input type="text" name="tel"><span id="span04"></span><br>
125 <input type="submit"  value="提交" onclick="return checkit();">
126 </form>
127 </body>
128 </html>

 

posted on 2017-06-19 21:21  天空很蓝啊  阅读(266)  评论(0)    收藏  举报

导航