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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function check(){

var userName=document.getElementById("userName2").value;//得到输入的用户名
var email=document.getElementById("email").value;//得到输入的邮箱
var index1=email.indexOf("@");//判断@符号第一次出现的位置
var index2=email.lastIndexOf(".");//判断.最后出现的位置
var pwd1=document.getElementById("pwd1").value;//得到输入的密码
var pwd2=document.getElementById("pwd2").value;//得到再次输入的密码
//判断用户名是否在4-6位之间(条件自己更改)
if(userName.length<4||userName.length>6){
document.getElementById("userSpan").className="red";
return false;
}
if(pwd1.length<6){
document.getElementById("pwd1Span").className="red";
return false;
}
if(pwd1!=pwd2){
document.getElementById("pwd2Span").className="red";
return false;

}

//判断@的位置是否符合要求

if(index1<1||index1>index2){
document.getElementById("emailSpan").className="red";
return false;

}

    //判断.是否就在@的后面

if(index1==index2-1){
document.getElementById("emailSpan").className="red";
return false;
}
return true;
}
function focusit(txt){
txt.nextSibling.className="span";
}

</script>
<style>
.red{color:#F00;display:inline;}
.span{display:none;}
</style>
</head>


<body>
<form action="a.html" method="post" οnsubmit="return check()">
<fieldset>
<legend>用户注册</legend>


<table width="500" border="1">
  <tr>
    <td width="219">用户名:</td>
    <td width="265"><label for="userName2"></label>
      <input type="text" name="userName" id="userName2" οnfοcus="focusit(this)"/><span id="userSpan" class="span">用户名要在4-6位之间</span></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><label for="pwd1"></label>
      <input type="password" name="pwd1" id="pwd1" οnfοcus="focusit(this)"/><span id="pwd1Span" class="span">密码至少要有6位</span></td>
  </tr>
  <tr>
    <td>再次输入密码:</td>
    <td><label for="pwd2"></label>
      <input type="password" name="pwd2" id="pwd2" οnfοcus="focusit(this)" /><span id="pwd2Span" class="span">两次输入的密码不一样</span></td>
  </tr>
  <tr>
    <td>性别:</td>
    <td><input name="sex" type="radio" id="sex" value="男" checked="checked" />
      <label for="sex">男</label>
      <input type="radio" name="sex" id="sex2" value="女" />
      <label for="sex2">女</label></td>
  </tr>
  <tr>
    <td>邮箱:</td>
    <td><label for="email"></label>
      <input type="text" name="email" id="email" οnfοcus="focusit(this)" /><span id="emailSpan" class="span">邮箱格式不正确</span></td>
  </tr>
  <tr>
    <td>个人简介:</td>
    <td><label for="mess"></label>
      <textarea name="mess" id="mess" cols="45" rows="5"></textarea></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="submit" id="submit" value="提交" />
      <input type="reset" name="reset" id="reset" value="重置" /></td>
  </tr>
</table>
</fieldset>
</form>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值