使用jquery编写代码实现用户注册表单的验证功能:
- 用户名、密码、确认密码和手机号不能为空
- 密码长度在8~20位之间,密码至少由数字、字母或下划线其中两种组成
- 确认密码必须和密码一致
- 手机号应该是11位,并且是合法的手机号段
- 验证码随机生成,可以忽略大小写
部分代码:(完整代码)
<script type="text/javascript">$(()=>{// 用户名校验$("#username").focus(function(){$(".notice:eq(0)").text("");})$("#username").blur(function(){if($(this).val()==""){$(".notice:eq(0)").addClass('notice-wrong').text("用户名或登录名不能为空");}});// 密码校验$("#password").focus(function(){$(".notice:eq(1)").text("");})$("#password").blur(function(){$(".notice:eq(1)").removeClass('notice-wrong').removeClass('notice-right');let reg = /^[\w]{8,20}$/;let reg1 = /(?!^[a-zA-Z]+$)(?!^[0-9]+$)(?!^[_]+$)^\S{8,20}$/;if($(this).val()==""){$(".notice:eq(1)").addClass('notice-wrong').text("密码不能为空");}else if(!reg.test($(this).val())){$(".notice:eq(1)").addClass('notice-wrong').text("密码长度必须在8~20位之间");}else if(!reg1.test($(this).val())){$(".notice:eq(1)").addClass('notice-wrong').text("密码至少由数字、字母或下划线其中两种组成");}else{$(".notice:eq(1)").addClass('notice-right').text("密码正确");}});$("#password").bind('input propertychange',function(){let reg = /^[\w]*$/;if(!reg.test($(this).val())){$(this).val("");$(".notice:eq(1)").addClass('notice-wrong').text("密码只能是数字、字母和_其中一种");}});// 确认密码校验$("#ensurepsd").focus(function(){$(".notice:eq(2)").text("");})$("#ensurepsd").blur(function(){$(".notice:eq(2)").removeClass('notice-wrong').removeClass('notice-right');let reg = /^[\w]{8,20}$/;if($(this).val()==""){$(".notice:eq(2)").addClass('notice-wrong').text("密码不能为空");}else if(!reg.test($(this).val())){$(".notice:eq(2)").addClass('notice-wrong').text("密码长度必须在8~20位之间");}else if($("#password").val()!==$("#ensurepsd").val()){$(".notice:eq(2)").addClass('notice-wrong').text("两次输入密码不一致");}else{$(".notice:eq(2)").addClass('notice-right').text("密码正确");}});$("#ensurepsd").bind('input propertychange',function(){let reg = /^[\w]*$/;if(!reg.test($(this).val())){$(this).val("");$(".notice:eq(2)").addClass('notice-wrong').text("密码只能是数字、字母和_其中一种");}});// 手机号校验$("#phone").focus(function(){$(".notice:eq(3)").text("");})$("#phone").blur(function(){if($(this).val()==""){$(".notice:eq(3)").addClass('notice-wrong').text("手机号不能为空");}let exp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;if(($(this).val()!=='')&&(!exp.test($(this).val()))){$(".notice:eq(3)").addClass('notice-wrong').text("请输入正确的手机号");}});$("#phone").bind('input propertychange',function(){let reg = /^[0-9]*$/;if(!reg.test($(this).val())){$(this).val("");$(".notice:eq(3)").addClass('notice-wrong').text("手机号码只能是数字");}});// 验证码let randomArr = ['A','a','B','b','0','C','c','D','d','1','E','e','F','f','2','G','g','H','h','3','I','i','J','j','4','K','k','L','l','5','M','m','N','n','6','O','o','P','p','7','Q','q','R','r','8','S','s','T','t','9','U','u','V','v','W','w','X','x','Y','y','Z','z'];let num = 4, iniStr = '';for(let i = 0; i < num; i++){iniStr += randomArr[Math.floor(Math.random()*62)];}$("#securityCodeText").text(iniStr);$("#securityCodeText").click(function(){let str = '';for(let i = 0; i < num; i++){str += randomArr[Math.floor(Math.random()*62)];}$("#securityCodeText").text(str);});$("#securityCode").focus(function(){$(".notice:eq(4)").text("");})$("#securityCode").blur(function(){if(($("#securityCode").val()!=='')&&($(this).val().toUpperCase()!==$("#securityCodeText").text().toUpperCase())){$(".notice:eq(4)").addClass('notice-wrong').text("验证码错误");}});});</script>