当前位置: 首页 > Web前端 > CSS

jQuery表单验证(包括:用户名、手机号、密码、确认密码、验证码60s)

时间:2023-03-30 22:50:41 CSS

每个项目中都会有一些登录注册模块的验证。例如:我们需要验证用户名的位数,是否符合用户名规则;密码需要校验字母开头,长度,是否包含下划线等,这里我总结了常用的校验规则,使用了项目中使用的类和id,如果自己用的话需要修改相应的名称。验证用户名的方法:functionusername(){//reg1=/^[a-zA-Z][a-zA-Z0-9_]{3,15}$/;//账号是否合法(起始带有字母,允许4-16个字节,允许字母数字下划线)varreg=/^[0-9a-zA-Z_\u3E00-\u9FA5]{3,15}$/;//4-16字节,允许字母数字下划线varuserName=$("#userName").val();如果(userName==""){$("#userNamePrompt").addClass("errorTextColor");$("#userNamePrompt").html("用户名不能为空!");返回假;}elseif(!reg.test(userName)){$("#userNamePrompt").addClass("errorTextColor");$("#userNamePrompt").html("不正确的用户名格式!");返回假;}else{varuserFlag=false;$.ajaxSetup({async:false});$.ajax({url:"user/checkUserName.do",data:{userName:$("#userName").val()},成功:function(data){if(data!="1"){$("#userNamePrompt").addClass("errorTextColor");$("#userNamePrompt").html(""+data);//userNamePrompt.innerHTML=data.fontcolor("red");}else{$("#userNamePrompt").html("");返回用户标志=真;}}});返回用户标志;}}验证手机号的方法:functionphone(){varreg=/^0?(13[0-9]|15[012356789]|17[0678]|18[0123456789]|14[57])[0-9]{8}$/;如果($("#telNo").val()==""){$("#phonePrompt").addClass("errorTextColor");$("#phonePrompt").html("电话号码不能为空!");/*$("#codeMsg").hide();*/返回false;}elseif($("#telNo").val().length<11){$("#phonePrompt").addClass("errorTextColor");$("#phonePrompt").html("电话号码长度错误!");/*$("#codeMsg").hide();*/返回false;}elseif(!reg.test($("#telNo").val())){$("#phonePrompt").addClass("errorTextColor");$("#phonePrompt").html("电话号码不存在!");/*$("#codeMsg").hide();*/returnfalse;}else{varphoneFlag=false;$.ajaxSetup({async:false});$.get("user/checkPhone.do",{type:0,telNo:$("#telNo").val()},function(data){if(data!="1"){$("#phonePrompt").addClass("errorTextColor");$("#phonePrompt").html(""+data);//telInfo.innerHTML=data.fontcolor("red");}else{$("#phonePrompt").html("");$("#codeMsg").show();returnphoneFlag=true;}});返回phoneFlag;}}密码验证方法:functionpassword(){//reg2=/^[a-zA-Z]\w{5,17}$/;//密码(以字母开头,长度在6之间和18个字母、数字和下划线)reg2=/^[a-zA-Z]\w{5,17}$/;varreg=/[\u4E00-\u9FA5]/;varuserPwd=$('#userPwd').val();if(userPwd==""){$("#newPwdPrompt").addClass("errorTextColor");$("#newPwdPrompt").html("密码不能为空!");$('.regQrshow').hide();returnfalse;}elseif(userPwd.length<6||userPwd.length>16){$("#newPwdPrompt").addClass("errorTextColor");$("#newPwdPrompt").html("长度不匹配!");$('.regQrshow').hide();返回false;}elseif(reg.test(userPwd)){$("#newPwdPrompt").addClass("errorTextColor");$("#newPwdPrompt").html("密码不能中文!");$('.regQrshow').hide();}else{返回真;}确认密码验证方法:functionrepassword(){/*这种写法在ie浏览器下会报错*//*varpwd=$("#userPwd").val().trim();*/*varrepwd=$("#userPwdAgain").val().trim();*/vara=$('#userPwd').val();varpwd=$.trim(a);varb=$('#userPwdAgain').val();varrepwd=$.trim(b);如果(pwd==""){$("#rePwdPrompt").addClass("errorTextColor");$("#rePwdPrompt").html("密码不能为空!");返回假;}elseif(pwd!==repwd){$("#rePwdPrompt").addClass("errorTextColor");$("#rePwdPrompt").html("两次密码不一致");返回假;}else{$("#rePwdPrompt").addClass("errorTextColor");$("#rePwdPrompt").html("");//setFlag($("#userPwdAgain"));返回真;}}60s重新获取验证码varwait=60;functiontime(btn){if(wait==0){$('#voice').removeAttr("已禁用");$('#msg').removeAttr("禁用");$('#voice').val("语音验证");$('#msg').val("短信验证");等待=60;}else{btn.attr("禁用",true);btn.val(wait+"秒后重发");等待-;setTimeout(函数(){时间(btn);},1000)}}