展示错误效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="frm" action="http://www.baidu.com" method="POST" onsubmit="formCheck()">
用户名:<input type="text" id="user" /><span id="userMsg" ></span><br>
密码:<input type="password" id="pwd" /><span id="pwdMsg" ></span><br>
确认密码:<input type="password" id="checkPwd" /><span id="checkPwdMsg" ></span><br>
手机:<input type="text" id="tel" /><span id="telMsg" ></span><br>
邮箱:<input type="text" id="email" /><span id="emailMsg" ></span><br>
个人信息:<br>
<textarea rows="10" cols="40" id="content" style="resize: none;" ></textarea><span id="contentMsg" ></span><br>
<input type="submit" value="注册">
</form>
<script>
function formCheck(){
//取消submit的默认效果。
var e = window.event;
e.preventDefault();
//正则 规定输入内容的格式
var userPatt = /^[A-z]\w{5,14}$/
var pwdPatt = /^.{6,15}$/
var checkpwdPatt = /^.{6,15}$/
var telPatt = /^1[356789]\d{9}$/
var emailPatt = /^(www\.)?([0-9]|[A-z])([0-9]|[A-z]){5,11}\@(qq|163|sin|yahoo)(\.com)(\.cn)?$/;
var userinfoPatt = /^.{15,100}$/
var user = document.frm.user.value;
var pwd = document.frm.pwd.value;
var checkPwd = document.frm.checkPwd.value;
var tel = document.frm.tel.value;
var email = document.frm.email.value;
var userinfo = document.frm.content.value;
//填入内容都正确才可以提交
if(userPatt.test(user)&& pwdPatt.test(pwd)&& telPatt.test(tel)&&emailPatt.test(email)&&userinfoPatt.test(userinfo)){
document.frm.submit();
}
}
//添加失焦事件
document.getElementById("user").onblur= checkUsername;
document.getElementById("pwd").onblur= checkPassword;
document.getElementById("checkPwd").onblur= password;
document.getElementById("tel").onblur= checkTel;
document.getElementById("email").onblur= checkEmail;
document.getElementById("content").onblur= checkContent;
function checkUsername(){
var userPatt = /^[A-z]\w{5,14}$/
var user = document.frm.user.value;
if( userPatt.test(user)){
document.getElementById("userMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
console.log(document.getElementById("userMsg"));
}else{
document.getElementById("userMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
function checkPassword(){
var pwdPatt = /^.{6,15}$/;
var pwd = document.frm.pwd.value;
if( pwdPatt.test(pwd)){
document.getElementById("pwdMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
}else{
document.getElementById("pwdMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
function password(){
var pwd = document.frm.pwd.value;
var checkPwd = document.frm.checkPwd.value
if(pwd == checkPwd){
if(pwd==""){
document.getElementById("checkPwdMsg").innerHTML ="<span style='color:red'>用户名未输入密码,请先输入密码再验证!</span>"
}else{
document.getElementById("checkPwdMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
}
}else{
document.getElementById("checkPwdMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
function checkTel(){
var telPatt = /^1[356789]\d{9}$/
var tel = document.frm.tel.value;
if( telPatt.test(tel)){
document.getElementById("telMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
}else{
document.getElementById("telMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
function checkEmail(){
var emailPatt = /^(www\.)?([0-9]|[A-z])([0-9]|[A-z]){5,11}\@(qq|163|sin|yahoo)(\.com)(\.cn)?$/;
var email = document.frm.email.value;
if( emailPatt.test(email)){
document.getElementById("emailMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
}else{
document.getElementById("emailMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
function checkContent(){
var userinfoPatt = /^.{15,100}$/;
var userinfo = document.frm.content.value;
if( userinfoPatt.test(userinfo)){
document.getElementById("contentMsg").innerHTML ="<span style='color:green'>恭喜您验证通过,该用户名可以使用!</span>"
}else{
document.getElementById("contentMsg").innerHTML ="<span style='color:red'>用户名验证失败,请检查后重新输入!</span>"
}
}
</script>
</body>
</html>
展示正确效果:
提示:内容虚拟