20170615的代码

来源：互联网发布：战龙三国旗子进阶数据编辑：程序博客网时间：2024/05/16 17:27

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
   <div>用户注册：</div><br/>
   <form action='check.jsp' method='post'onsubmit="return checkAll()">
        
       <span>请输入账号：</span><input type="text" name='account' onblur='checkAccount()' /><span class='userAccount'></span><br/><br/>
        
       <span>请输入密码：</span><input type="password" name='pwd' onblur='checkPwd()' /><span class='userPwd'></span><br/><br/>
        
       <span>再次输入密码：</span><input type="password" name='pwd2' onblur='checkPwd2()' class='pwd2'/><span class='userPwd2'></span><br/><br/>
       
       <input type="submit" value="注册">
   </form>
</body>
<script type="text/javascript">

   // -----------------------验证账号是否符合规范-----------------------
   var checkAccount = function () {
       // 获取到账户名
       var userAccount = document.querySelector("input[type='text']").value;
       // 验证账户名长度
       if (userAccount.trim().length < 2 || userAccount.trim().length > 10) {
           document.querySelector(".userAccount").innerText = " 用户名长度为2-10位字符！";
           document.querySelector(".userAccount").style = "color:red";
           return false;
       }
       document.querySelector(".userAccount").innerText = " 填写正确！";
       document.querySelector(".userAccount").style = "color:green ";
       return true;
   }

   // -----------------------验证密码是否符合规范-----------------------
   function checkPwd() {
       // 获取到密码
       var userPwd = document.querySelector("input[type='password']").value;
       // 验证密码长度
       if (userPwd.length < 6 || userPwd.length > 16) {
           document.querySelector(".userPwd").innerText = " 密码长度为6-16位字符！";
           document.querySelector(".userPwd").style = "color:red";
           return false;
       }
       document.querySelector(".userPwd").innerText = " 填写正确！";
       document.querySelector(".userPwd").style = "color:green ";
       return true;
   }

   // -----------------------验证两次密码是否输入一致-----------------------
   function checkPwd2() {
       // 获取到二次密码
       var userPwd2 = document.querySelector(".pwd2").value;
       // 获取第一次输入的密码
       var userPwd = document.querySelector("input[type='password']").value;
       // 判断两次密码输入是否一致
       if (userPwd == userPwd2) {
           document.querySelector(".userPwd2").innerText = " 填写正确！";
           document.querySelector(".userPwd2").style = "color:green ";
           return true;
       } else {
           document.querySelector(".userPwd2").innerText = " 两次密码输入不一致！";
           document.querySelector(".userPwd2").style = "color:red";
           return false;
       }
   }

   // -----------------------三次验证是否通过-----------------------
   function checkAll() {
       return checkAccount() && checkPwd() && checkPwd2();
   }

</script>
</html>

阅读全文

0 0