Js表单验证代码一例(可验证中文)

发布时间:2019-11-24编辑:脚本学堂
本篇文章介绍了,Js验证表单的一个代码,实现用户名、密码、密码长度等的验证,并可对中文进行验证,有需要的朋友,不妨参考下。

代码如下:
 

复制代码 代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script language="javascript"> 
function checkname(uname){ 
var us=document.getElementById("us"); 
var name=trim(uname); 

if(name==null||name==""){ 
us.innerHTML="<font color='red'>用户名不能为空</font>" 
return false; 
}else if(!/^[a-zA-Z]w{0,9}$/.test(name)){ 
us.innerHTML="<font color='red'>用户名开头必须为字母</font>" 
return false; 

else{ 
us.innerHTML=""; 
return true; 


function checkpassword(pass){ 
var p=document.getElementById("p"); 
var name=document.getElementById("name"); 
var password=trim(pass) 
if(password==null||password==""){ 
p.innerHTML="<font color='red'>密码不能为空</font>"; 
return false; 
}else if(password==name.value){ 
p.innerHTML="<font color='red'>密码不能和用户名相同</font>"; 
return false; 
}else if(!/^w{6,10}$/.test(password)){ 
p.innerHTML="<font color='red'>密码长度必须为6-10位</font>"; 
return false; 

else{ 
p.innerHTML=""; 
return true; 


function checkpass(pass2){ 
var p2=document.getElementById("p2"); 
var password=document.getElementById("password"); 
var password2=trim(pass2) 
if(password2==null||password2==""){ 
p2.innerHTML="<font color='red'>密码不能为空</font>"; 
return false; 
}else if(password2!=password.value){ 
p2.innerHTML="<font color='red'>两次输入的密码必须相同</font>"; 
 
return false; 
}else if(!/^w{6,10}$/.test(password2)){ 
p2.innerHTML="<font color='red'>密码长度必须为6-10位</font>"; 
return false; 
}else{ 
p2.innerHTML=""; 
return true; 


function checkemail(mail){ 
var e=document.getElementById("e"); 
var email=trim(mail) 
if(email==null||email==""){ 
e.innerHTML="<font color='red'>电子邮箱不能为空</font>"; 
return false; 
}else if(!/^[w-]+(.[w-]+)*@([w-]+.)+[a-zA-Z]+$/.test(email)) 

e.innerHTML="<font color='red'>请输入正确的电子邮箱</font>"; 
return false; 

else{ 
e.innerHTML=""; 
return true;} 

function trim(s){ 
  return s.replace(/^s+|s+$/g,"");//去除空格; 

function checkdata(){ 
var name=document.getElementById("name"); 
var pass=document.getElementById("password"); 
var pass2=document.getElementById("pass"); 
var email=document.getElementById("email"); 
if(!checkname(name.value)){ 
return false; 

 
if(!checkpassword(pass.value)){ 
return false; 

if(!checkpass(pass2.value)){ 
return false; 

if(!checkemail(email.value)){ 
return false; 

return true; 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js表单验证_www.jb200.com</title> 
</head>
<body> 
<center> 
<form action="#" method="post"> 
<table border="0" cellspacing="1" cellpadding="5"> 
<tr><td>用户名</td> 
<td><input type="text" id="name" onblur="checkname(this.value)" name="uname"/><span id="us"> 
</span></td></tr> 
<tr><td>密码</td> 
<td><input  type="password" id="password" onblur="checkpassword(this.value)" name="pass"/><span id="p"> 
</span></td></tr> 
<tr><td>确认密码</td> 
<td><input  type="password" id="pass" onblur="checkpass(this.value)" name="pass2"/><span  id="p2"> 
</span></td></tr> 
<tr><td>电子邮箱</td> 
<td><input type="text" id="email" onblur="checkemail(this.value)" name="mail"/><span id="e"> 
</span></td></tr> 
</table> 
<input type="submit" value="注册"  onclick="return checkdata()"/>   <input type="submit" value="取消"/> 
</form> 
</center> 
</body> 
</html> 

2、js对中文的验证
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script language="javascript"> 
function checkname(uname){ 
var s=document.getElementById("s"); 
if(uname==""||uname==null){ 
s.innerHTML="<font color='red'>用户名不能为空</font>"; 
return false; 
}else if(!/^[u4e00-u9fa5]+$/.test(uname)){ 
s.innerHTML="<font color='red'>用户名只能为中文</font>"; 
return false; 

else { 
return true; 


function data(){ 
var user=document.getElementById("user") 
if(!checkname(user.value)){ 
return false; 

return true; 

</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Js表单验证,支持中文-www.jb200.com</title> 
</head> 
<body> 
<form action="#" method="get" onsubmit="return data();"> 
<table border="0" cellspacing="1"> 
<tr><td><input type="text" name="uname" id="user" onblur="checkname(this.value)"/></td><td><span id="s"></span></td></tr> 
</table> 
<input type="submit" value="login"/> 
</form> 
</body> 
</html>