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.οnlοad=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="提交" οnclick="return checkit();"> 126 </form> 127 </body> 128 </html>