vue项目接口域名动态的获取方法
231
2023-05-08
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
问题:表单怎么在输入后立即验证,而不是提交后再验证那么不方便(网上搜到的要么是模棱两可,要么是残缺不全…)
方法:鉴于此,加上我个人的理解(注释)在上面。
截图:
代码:
//及时验证用户名
function checkuse(){
//在每个函数中定义check变量是为了在表单提交后,能够逐个验证每个函数是否通过,很好很好。(以下同理)
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("用户名输入不合法,请重新输入!");
//此处甚妙,既然你在此处输入错误,那么按理说当然要在此处继续输入了。(在此处继续获取焦点!)
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";
check = true;
}
return check;
}
//利用正则表达式判断密码符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密码输入不合法,请重新输入!");
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成,且必须包含字母、数字和标点符号 √";
check = true;
}
return check;
}
//验证密码是否不一致!
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("两次输入密码不一致,请重新输入!");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";
check = true;
}
return check;
}
//提交时验证用户类别
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("请选择用户类型!");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";
check = true;
}
return check;
}
//提交时验证用户性别
function checkGender(){
var check;
var gender = "";
//获取所有名称为sex的标签
var sex = document.getElementsByName("sex");
//遍历这些名称为sex的标签
for(var i=0;i //如果某个sex被选中,则记录 if(sex[i].checked) gender = sex[i].value; } if(gender == "") { alert("请选择性别!"); check = false; }else{ document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √"; check = true; } return check; } //及时验证出生日期 function checkDate(){ var check; if(document.getElementById("txtDate").value ==""){ alert("请填写出生日期!"); document.getElementById("txtDate").focus(); check = false; }else{ document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √"; check = true; } return check; } //及时验证兴趣爱好 function checkHobby(){ var check; var hobby = 0; //objNum为所有名称为hobby的input标签 var objNum = document.getElementsByName("hobby"http://); //遍历所有hobby标签 for(var i=0;i //判断某个hobby标签是否被选中 if(objNum[i].checked==true) hobby++; } //如果有选中的hobby标签 if(hobby >=1){ document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √"; check = true; }else{ alert("请填写爱好!"); check = false; } return check; } //正则表达式验证电子邮件(及时) function checkemail(){ var check; //电子邮件的正则表达式 var e1 = document.getElementById("email").value.indexOf("@",0); var e2 = document.getElementById("email").value.indexOf(".",0); if(email == "" || (e1==-1 || e2==-1) || e2 { alert("E_mail输入错误!"); document.getElementById("email").focus(); check = false; } else { document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL,将用于密码找回 √"; check = true; } return check; } //及时验证自我介绍 function checkintro(){ var check; var intro = document.getElementById("introduction").value; if (intro.length > 100) { alert("字数超限!"); check = false; } else { document.getElementById("checktext9").innerHTML = "* 限100字内 √"; document.getElementById("checktext9").focus(); check = true; } return check; } //提交表单时所有都验证一遍(若任何一个验证不通过,则返回为false,阻止表单提交) function check() { var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby() && checkemail() &&checkintro(); return check; } 表单及时验证小例子 http:// 男 女 阅读 音乐 运动 CSS样式: input:focus,textarea:focus{ border:1px solid #f00; background:#fcc; } textarea{ width:230px; height:50px; } body { font-size:15px; /* 字体的样式 */ font-family:Microsoft YaHei; } select option{ font-size:10px; font-family:Microsoft YaHei; } 以上所述是给大家介绍的javaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证),希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~