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>
