如图,要求输入用户名失去焦点后用户名不得为空或者小于6个字符,否则就显示提示,密码同理,第二个确认密码只需判断与上一个密码框输入是否一致即可,否则显示两次密码输入不一致,在没有完成校验点击提交按钮跳转不要,都满足校验方可跳转提交,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验</title>
</head>
<body>
<form action="xxxx" onsubmit="return sub()">
用户名:<input name="name" type="text" onblur="usr()"/><span id="1" ></span> <br>
密码:<input name="pwd" type="password" onblur="pw()"><span id="2" ></span><br>
确认密码:<input name="pwd1" type="password" onblur="pw1()"/><span id="3" ></span><br>
<input type="submit" value="确认注册">
</form>
</body>
<script>
function usr() {
var na=document.querySelector("[name=name]").value;
if(na==''||na.length<6){
document.querySelector("[name=name]+span").innerHTML="*用户名不得少于6个字符";
return false;
}else {
document.querySelector("[name=name]+span").innerHTML="";
return true;
}
}
function pw() {
var p=document.querySelector("[name=pwd]").value;
if(p==''||p.length<6){
document.querySelector("[name=pwd]+span").innerHTML="*密码不得少于6个字符";
return false;
}else {
document.querySelector("[name=pwd]+span").innerHTML="";
return true;
}
}
function pw1() {
var p=document.querySelector("[name=pwd]").value;
var p1=document.querySelector("[name=pwd1]").value;
if(p!=p1){
document.querySelector("[name=pwd1]+span").innerHTML="*两次输入密码不一致";
return false;
}else {
document.querySelector("[name=pwd1]+span").innerHTML="";
return true;
}
}
function sub() {
var result=usr()&&pw()&&pw1();
return result;
}
</script>
</html>