JS实现表单验证

最新推荐文章于 2024-10-04 06:11:34 发布

ld191474639

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量654

点赞数

分类专栏： JQuery 文章标签： function email xhtml null border action

本文链接：https://blog.csdn.net/ld191474639/article/details/7516072

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
</head>

<body>
<center>
<form action="#" method="post">
<table border="0" cellspacing="1" cellpadding="5">
<tr><td>用户名</td>
<td><input type="text" id="name" οnblur="checkname(this.value)" name="uname"/><span id="us">
</span></td></tr>
<tr><td>密码</td>
<td><input  type="password" id="password" οnblur="checkpassword(this.value)" name="pass"/><span id="p">
</span></td></tr>
<tr><td>确认密码</td>
<td><input  type="password" id="pass" οnblur="checkpass(this.value)" name="pass2"/><span  id="p2">
</span></td></tr>
<tr><td>电子邮箱</td>
<td><input type="text" id="email" οnblur="checkemail(this.value)" name="mail"/><span id="e">
</span></td></tr>
</table>
<input type="submit" value="注册"  οnclick="return checkdata()"/>       <input type="submit" value="取消"/>
</form>
</center>
</body>
</html>

对中文的验证

<!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>无标题文档</title>
</head>

<body>
<form action="#" method="get" οnsubmit="return data();">
<table border="0" cellspacing="1">
<tr><td><input type="text" name="uname" id="user" οnblur="checkname(this.value)"/></td><td><span id="s"></span></td></tr>
</table>
<input type="submit" value="login"/>
</form>
</body>
</html>