嘉兴网站搜索排名百度网页搜索
说明
这是针对某个需求而制作的，并没有办法完全适用于所有，所以，仅供参考。当需要自己做时，需要修改与添加自己的东西，变通一下，便可获得其他内容的验证
涉及到的input部分
html 部分
<form id="from-LogInOrSignUp" method="post" name="LogInOrSignUp"><!-- 注册 --><div class="register-box hidden"><h1>register</h1><input class="name" type="text" name="username" placeholder="用户名" maxlength="10"><input id="e-mail" type="email" name="e-mail" placeholder="邮箱"><input class="psw" type="password" name="psw" placeholder="密码" maxlength="10"><input class="pswConfirm " type="password" name="pswConfirm" placeholder="确认密码" maxlength="10"><button class="sent" type="submit" name="signUp">注册</button></div><!-- 登录 --><div class="login-box"><h1>login</h1><input class="name" type="text" name="username" placeholder="用户名" maxlength="10"><input class="psw" type="password" name="psw" placeholder="密码" maxlength="10"><button class="sent" type="submit" name="logIN" >登录</button></div>
</form>js部分
$(function (){ /*$()与$(document).ready(), jQuery()、 window.jQuery()等价与windows.onload的区别是，它加载完DoM元素后即执行（非文字媒体文件之前），windows.onload是网页所有东西加载完后才会执行*/// 全局变量let sbm_flag = 0;//用于判断是否满足表单提交条件let li_flag = false;//给注册一个布尔变量来判断是注册还是登录let $div_errMsg = $('#div_errMsg');//为表单元素添加失去焦点事件$(":input").on("blur",function(){//所有input都可以绑上去//验证姓名if($(this).is(".name")){let nameVal = $.trim(this.value); //原生js去// 空格方式：this.replace(/(^\s*)|(\s*$)/g, "")let regName = /[~#^$@%&!*()<>:;'"{}【】]/;//正则表答式（会看和会写简单的即可，其余可参考文档）$div_errMsg.empty();if(!nameVal || nameVal.length < 6 || regName.test(nameVal)){//test用与将用户输入数据与正则表达式进行核验let errorMsg = " 账号非空，长度6位以上，不包含特殊字符！";$div_errMsg.append("<span class='msg onError'> " + errorMsg + "</span>");//append会在后面追加子对象}else{$div_errMsg.empty();//清除div_errMsg的子标签sbm_flag += 1;}
}//验证密码if($(this).is(".psw")){let pswValue = $.trim(this.value);let regName = /[~#^$@%&!*()<>:;'"{}【】]/;//正则表答式（会看和会写简单的即可，其余可参考文档）$div_errMsg.empty();if(!pswValue || pswValue.length < 2 || regName.test(pswValue)){//test用与将用户输入数据与正则表达式进行核验let errorMsg = " 密码非空，长度2位以上，不包含特殊字符！";$div_errMsg.append("<span class='msg onError'> " + errorMsg + "</span>");//append会在后面追加子对象}else{$div_errMsg.empty();sbm_flag += 1;}
}//确认密码if($(this).is(".pswConfirm")){let pswConVal= $.trim(this.value);//$(":password") :表单选择器，选取所有的密码框let pswVal = $(":password:first").val();//注意选择器与过滤器的使用，还有不要把DOM对象与jQuery对象搞混$div_errMsg.empty();if(pswConVal && pswVal == pswConVal){$div_errMsg.empty();sbm_flag += 1;}else{let errorMsg = " 前后输入的密码不一致，请重新输入！不包含特殊字符！";$div_errMsg.append("<span class='msg onError'> " + errorMsg + "</span>");//append会在后面追加子对象}
}//验证邮箱if($(this).is("#e-mail")){let emailVal = $.trim(this.value);let regEmail = /.+@.+\.[a-zA-Z]{2,4}$/;$div_errMsg.empty();if(!emailVal || !regEmail.test(emailVal)){let errorMsg = " 请输入正确的E-Mail住址！";$div_errMsg.append("<span class='msg onError'> " + errorMsg + "</span>");//append会在后面追加子对象}else{$div_errMsg.empty();sbm_flag += 1;li_flag = true;}}
})document.getElementById("register").onclick=resetForm;//dom对象（原生js也写写，复习一下）document.getElementById("login").onclick=resetForm;function resetForm(){sbm_flag = 0;//重置li_flag = false;document.getElementById("from-LogInOrSignUp").reset();//原生js才有reset()方法，jquery并没有添加该方法}//点击提交按钮时，通过trigger()来触发文本框的失去焦点事件$(".sent").on("click",function(){//trigger 事件执行完后，浏览器会为submit按钮获得焦点/* $("form .required:input").trigger("blur");//失去焦点即触发上面的事件，使onError能帮忙起到是否能提交不要死板，要根据自己的需要来，之前写的表单验证需要用trigger,但现在这个完全没必要，加了还添加了其他问题与负担*/// console.log(sbm_flag);// console.log(li_flag);// alert("2");if(sbm_flag > 3 && li_flag){//注册()$("form").get(0).action="https://jingyan.baidu.com/";//也可以直接写 #}//登录else if(!li_flag && sbm_flag === 2) {//===是指类型相同，值相等$("form").get(0).action = "inMain.html";}});})完整网页代码下载链接：
链接: https://pan.baidu.com/s/1U7Dgw9kKmPCeMBK7h30s2Q?pwd=nbi4 提取码: nbi4