js表单验证

来源：互联网发布：斯蒂芬库里知乎编辑：程序博客网时间：2024/05/23 16:44

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页</title>
<style type="text/css">
b{visibility: hidden;}
.active{background-color: red;}

</style>
</head>
<body>
<form method="get" onsubmit="return checkForm()">
<div>
<label for="userName">用户名：</label>
<input type="text" id="userName" placeholder="用户名">
<span></span><br>
<b id="count">0个字符</b>
</div>
<div>
<label for="userPassword">密码：</label>
<input type="password" id="userPassword" placeholder="密码">
<span id="userPassword_qq" class="prompts"></span><br>
<em class="active">弱</em> <em>中</em> <em>强</em>
</div>
<div>
<label for="userRepassword">确认密码：</label>
<input type="password" id="userRepassword" placeholder="重新输入密码" disabled>
<span id="userRepassword_qq" class="prompts"></span>
</div>
<div>
<label for="nickName">昵称：</label>
<input type="text" id="nickName" placeholder="昵称">
<span id="nickName_qq" class="prompts"></span>
</div>
<div>
<label for="userEmail">邮箱：</label>
<input type="text" id="userEmail" placeholder="邮箱">
<span id="userEmail_qq" class="prompts"></span>
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
</body>
<script type="text/javascript">
var checkBool=false;
function getStringLen(Str){
var i,len,code;
if(Str==null || Str == "") return 0;
len = Str.length;
for (i = 0;i < Str.length;i++)
{
code = Str.charCodeAt(i);
if (code > 255) {len ++;}
}
return len;
}
function findStr(str,n){
var tmp=0;
for(var i=0;i<str.length;i++){
if(str.charAt(i)==n)
tmp++;
}
return tmp;
}
window.onload=function(){
var alnput=document.getElementsByTagName("input");
var oName=alnput[0];
var pwd=alnput[1];
var pwd2=alnput[2];
var ncName=alnput[3];
var Emi=alnput[4];
var aspan=document.getElementsByTagName("span");
var name_msg=aspan[0];
var pwd_msg=aspan[1];
var pwd2_msg=aspan[2];
var ncName_msg=aspan[3];
var Emi_msg=aspan[4];
var count=document.getElementById("count");
var aEM=document.getElementsByTagName("em");
var name_length=0;
//名字框验证
oName.onfocus=function(){
name_msg.style.display="inline";
name_msg.innerHTML="5-25个字符";

};
oName.onkeyup=function(){
count.style.visibility="visible";
name_length=getStringLen(this.value);
count.innerHTML=name_length+"个字符";
if(name_length==0){
count.style.visibility="hidden";
}
};
oName.onblur=function(){
var re=/[^\w\u4e00-\u9fa5]/g;
if(re.test(this.value)){
name_msg.innerHTML="含有非法字符";
checkBool=false;
}
else if(this.value==""){
name_msg.innerHTML="不能为空";
checkBool=false;
}
else if(name_length>25){
name_msg.innerHTML="长度超过25个字符";
checkBool=false;
}
else if(name_length<6){
name_msg.innerHTML="长度小于6个字符";
checkBool=false;
}
else{
name_msg.innerHTML="OK";
checkBool=true;
}
};
//密码
pwd.onfocus=function(){
pwd_msg.style.disable="block";
pwd_msg.innerHTML="6-16个字符，请使用字母加数字或符号的组合密码，不能单独使用字母，符号或数字"
};
pwd.onkeyup=function(){
if(this.value.length>5){
aEM[1].className="active";
pwd2.removeAttribute("disabled");
pwd2_msg.style.display="inline";
pwd2_msg.innerHTML="请在输入一次"

}
else{
aEM[1].className = "";
pwd2.setAttribute("disabled",null);
pwd2_msg.style.display = "none";
}
if(this.value.length>10){
aEM[2].className = "active";
}
else{
aEM[2].className = "";
}
};
pwd.onblur = function(){
var m = findStr(pwd.value,pwd.value[0]);
var re_n=/[^\d]/g;
var re_t=/[^a-zA-Z]/g;
if(this.value == ""){
pwd_msg.innerHTML="不能为空";
checkBool=false;
}
else if(m == this.value.length){
pwd_msg.innerHTML = "不能用相同字符";
checkBool=false;
}
else if(this.value.length>16||this.value.length<6){
pwd_msg.innerHTML = "长度应为6-16个字符";
checkBool=false;
}
else if(!re_n.test(this.value)){
pwd_msg.innerHTML = "不能全为数字";
checkBool=false;
}
else if(!re_t.test(this.value)){
pwd_msg.innerHTML = "不能全为字母";
checkBool=false;
}
else {
pwd_msg.innerHTML = "OK";
checkBool=true;
}
};
//确认密码
pwd2.onblur=function(){
if(this.value == ""){
pwd2_msg.innerHTML = "请再次输入密码";
checkBool=false;
}
else if(this.value!=pwd.value){
pwd2_msg.innerHTML = "两次输入密码不一致";
checkBool=false;
}
else{
pwd2_msg.innerHTML = "OK";
checkBool=true;
}
};
Emi.onfocus = function(){
Emi_msg.innerHTML = "请输入正确邮箱地址"
};
Emi.onblur=function(){
var re_E=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(this.value == ""){
Emi_msg.innerHTML = "邮箱不能为空";
checkBool=false;
}
else if(!re_E.test(this.value)){
Emi_msg.innerHTML = "邮箱格式错误";
checkBool=false;
}
else{
Emi_msg.innerHTML = "OK";
checkBool=true;
}
}
};
function checkForm(){
return checkBool;
}
</script>
</html>

0 0