在前端表单中进行验证
下面是前端表单代码
1 <form onsubmit="return checkFrom()" action="index2.html"> 2 名称：<input type="text" id="name" onblur="checkName()"> 3 <span id="names"></span><br> 4 姓氏:<input type="text" id="first" onblur="checkFirst()"> 5 <span id='firsts'></span><br> 6 用户名:<input type="text" id="username" onblur="checkUser()"> 7 <span id="users"></span><br> 8 密码:<input type="password" id="pwd" onblur="checkForm()"> 9 <span id="pwds"></span><br> 10 验证密码:<input type="password" id="repwd" onblur="checkRepwd()"> 11 <span id="repwds"></span><br> 12 Email：<input type="email" id="email" onblur="checkEmail()"> 13 <span id="emails"></span><br> 14 电话:<input type="tel" id="tel" onblur="checkTel()"> 15 <span id="tels"></span><br> 16 请同意我们的声明 :<input type="checkbox" id="agree"><br> 17 我乐意结束新信息:<input type="checkbox" class="news" checked="checked">Market 18 <input type="checkbox" class="news" checked="checked">Latest 19 <input type="checkbox" class="news">Mailing 20 <input type="checkbox" class="news">Market 21 <br> 22 <input type="submit" value="提交"> 23 </form>
下面是js验证代码
1 <script> 2 //名字不得为空，2-3位汉字 3 function checkName() { 4 var name = $("#name").val(); 5 var ptname = /^[\u4e00-\u9fa5]{2,3}$/ 6 console.log(name); 7 if (name == "") { 8 $("#names").html("用户名不能为空"); 9 $("#names").css("color", 'red'); 10 return false; 11 } else if (ptname.test(name) == false) { 12 $("#names").html("用户名必须为2-3位汉字"); 13 $("#names").css("color", 'red'); 14 return false; 15 } else { 16 $("#names").html("√"); 17 $("#names").css("color", 'green'); 18 return true; 19 } 20 } 21 //姓氏验证 22 function checkFirst(){ 23 var first = $("#first").val(); 24 var ptfirst = /^[\u4e00-\u9fa5]$/ 25 console.log(first); 26 if (first == "") { 27 $("#firsts").html("姓氏不能为空"); 28 $("#firsts").css("color", 'red'); 29 return false; 30 } else if (ptfirst.test(first) == false) { 31 $("#firsts").html("姓氏必须为1位汉字"); 32 $("#firsts").css("color", 'red'); 33 return false; 34 } else { 35 $("#firsts").html("√"); 36 $("#firsts").css("color", 'green'); 37 return true; 38 } 39 } 40 //用户名不得为空，5-10位字符，不得以数字和下划线开头 41 function checkUser() { 42 var username = $("#username").val(); 43 var ptuser = /^[a-zA-Z]\w{4,9}$/; 44 var ptuser = /^[^0-9_]\w{4,9}$/ 45 if (username == "") { 46 $("#users").html("用户名不能为空"); 47 $("#users").css("color", 'red'); 48 return false; 49 } else if (ptuser.test(username) == false) { 50 $("#users").html("用户名格式不正确"); 51 $("#users").css("color", 'red'); 52 return false; 53 } else { 54 $("#users").html("√"); 55 $("#users").css("color", 'green'); 56 return true; 57 } 58 } 59 //验证密码 60 function checkForm() { 61 var pwd = $("#pwd").val(); //获取表单的value值 62 var pt1 = /^\w{6,}$/; //数字、字母、下划线6位以上 63 var pt2 = /[a-z]/; //必须有小写字母 64 var pt3 = /[A-Z]/; //必须有大写字母 65 var pt4 = /[0-9]/; //必须有数字 66 var pt5 = /_/; //必须有下划线 67 if (pt1.test(pwd) == false || pt2.test(pwd) == false || pt3.test(pwd) == false || pt4.test(pwd) == false || pt5.test( 68 pwd) == false) { 69 $("#pwds").html("用户名必须为数字、大写字母、小写字母、下划线组成6位以上"); 70 $("#pwds").css('color', 'red') 71 return false; 72 } else { 73 $("#pwds").html("√"); 74 $("#pwds").css('color', 'green') 75 return true; 76 } 77 } 78 //验证确认密码 79 function checkRepwd() { 80 var pwd = $("#pwd").val(); //获取密码 81 var repwd = $("#repwd").val(); //获取确认密码 82 if (pwd != repwd) { 83 $("#repwds").html("确认密码与密码不一致"); 84 $("#repwds").css("color", 'red'); 85 return false; 86 } else { 87 $("#repwds").html("√"); 88 $("#repwds").css("color", 'green'); 89 return true; 90 } 91 } 92 //邮箱验证 93 function checkEmail() { 94 var email = $("#email").val(); 95 /*9080@qq.com 12313@163.com*/ 96 /* \w[数字字母下划线]+至少一次至多不限 .在正则中有特殊的函数 所以需要转义 */ 97 var ptemail = /^\w+@\w+\.com$/; 98 if (ptemail.test(email) == false) { 99 $("#emails").html("邮箱格式不正确"); 100 $("#emails").css("color", 'red'); 101 return false; 102 } else { 103 $("#emails").html("√"); 104 $("#emails").css("color", 'green'); 105 return true; 106 } 107 } 108 //验证电话 109 function checkTel() { 110 var tel = $("#tel").val(); 111 var pttel = /^1[35789][0-9]{9}$/; 112 if (pttel.test(tel) == false) { 113 $("#tels").html("手机号码格式不正确"); 114 $("#tels").css("color", 'red'); 115 } else { 116 $("#tels").html("√"); 117 $("#tels").css("color", 'green'); 118 } 119 } 120 //表单验证 121 function checkFrom() { 122 var len = $(".news:checked").length; 123 if (len < 2) { 124 alert("爱好至少选择两个"); 125 return false; //终止表单提交 126 } 127 if (checkName() == false ||checkUser()==false || checkUser() == false || checkForm() == false || checkRepwd() == false || checkEmail() ==false || checkTel() == false){ 128 return false; 129 } 130 } 131 </script>
