js验证表单

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head></head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员注册</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
       body {
           margin: 0 auto;
           margin-top: 150px;
           background-image: url("image/regist_bg.jpg");
       }

       .carousel-inner .item img {
           width: 100%;
           height: 300px;
       }

       font {
           color: #3164af;
           font-size: 18px;
           font-weight: normal;
           padding: 0 10px;
       }
</style>
<script type="text/javascript">
/*
       $(function(){
           $("#registform").validate({
               rules:{
                   "username":{"required":true
                       },
                   "password":{
                       "required":true,
                       "rangelength":[6,10]
                   },
                   "confirm_password":{
                       "required":true,
                       "equalTo":"#password"
                   },
                   "email":{
                       "required": true,
                       "email":true
                   },
                   "name":{
                       "required": true,
                   }
               },
               messages:{
                   "username":{
                       "required":"请填写用户名"
                   },
                   "password":{
                       "required":"请填写密码",
                       "rangelength":"密码长度应为6-12位"
                   },
                   "confirm_password":{
                       "required":"请填写密码",
                       "equalTo":"两次密码输入不一致"
                   },
                   "email":{
                       "required":"邮箱不能为空",
                       "email":"请输入正确的邮箱格式"
                   },
                   "name":{
                       "required": "姓名不能为空"
                   }
               }
           });
       }); */

</script>
<script type="text/javascript">

   //根据id获取节点
   function $(id) {
       return document.getElementById(id);
   }

   //根据id获取节点的值
   function $V(id) {
       return $(id).value;
   }

   //获取ajax对象
   function getXhr() {
       var xhr = null;
       if (window.XMLHttpRequest) {
           xhr = new XMLHttpRequest();
       } else {
           xhr = new ActiveXObject('Microsoft.XMLHttp')
       }
       return xhr;
   }
   //获取lable元素,将错误信息设置给lable对象

   //检验用户名不能为空且不能重复
   function checkUserName(){
       var username=$("username");
       var uname=$V("username");
       if(uname.length == 0){
           $("msg").innerHTML='用户名不能为空';
       }else{
           $("msg").innerHTML='';
           //使用AJAX,验证用户名是否存在;
           var xhr=getXhr();
           xhr.open('get','${pageContext.request.contextPath}/checkUsername?uname='+ uname,true);
           xhr.send();
           xhr.onreadystatechange=function(){
               if (xhr.readyState == 4 && xhr.status == 200) {
                   var value = xhr.responseText;
                   $("msg").innerHTML=value;
               }
           }
       }
   }

   //校验密码不能为空,且开头是大写字母;
   function checkPwd(){
       var pwd=$V("password");
       console.log(pwd);
       var reg=/^[A-Z]+[a-z0-9]+$/;
       $("msg").innerHTML='';
       if(! reg.test(pwd)){
           $("msg").innerHTML="以大写字母开头,由字母和数字组成";
       }
       if (pwd.length < 6 || pwd.length > 12){
           $("msg").innerHTML="密码长度为应6-12位";
       }
       if(pwd.length==0){
           $("msg").innerHTML="密码不能为空";
       }
   }

   //验证确认密码
   function valitadePwd(){
       //获取元素中的值
       var pwd1 = $V("password");
       var pwd2 = $V("confirm_password");
       console.log(pwd2);
       if(pwd2 != pwd1){
           $("msg").innerHTML="两次密码输入不一致";
       }else{
           $("msg").innerHTML="";
       }
       if(pwd2.length==0){
           $("msg").innerHTML="密码不能为空";
       }
   }
   //验证emial
   function validateEmail(){
       var vemail=$V("inputEmail");
       var reg=/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/;
       if (!reg.test(vemail)) {
           $("msg").innerHTML="请输入正确的邮箱格式";
       }else{
           $("msg").innerHTML="";
       }
   }

   //验证姓名
   function validateName(){
       var name=$V("usercaption");
       var reg=/^([\u4e00-\u9fa5]){2,10}$/; //只能是中文，长度为2-7位
       if (!reg.test(name)) {
           $("msg").innerHTML="请输入中文姓名长度为2-10位";
       }else{
           $("msg").innerHTML="";
       }
   }

   //验证手机号
   function validatTel(){
       var tel=$V("telephone");
       var reg= /^[1][3,4,5,7,8][0-9]{9}$/;
       if (!reg.test(tel)) {
           $("msg").innerHTML="请输入合法的手机号";
       }else{
           $("msg").innerHTML="";
       }
   }

   //更新验证码
   function changeCode() {
       document.getElementById("myCode").src = "${pageContext.request.contextPath}/bulideCode?code="+ new Date().getSeconds();
   }

   //检查验证码输入是否正确;
   function checkCode() {
       //获取ajax对象
       var xhr = getXhr();
       //获取验证码输入框中的值
       var vCode = $V("validateCode");
       //获取提交按钮元素
       //创建连接;将值传入到后端;
       xhr.open('get', '${pageContext.request.contextPath}/checkCode?vCode='+ vCode, true);
       //发送请求
       xhr.send();
       //判断xhr对象的状态改变情况
       xhr.onreadystatechange = function() {
           if (xhr.readyState == 4 && xhr.status == 200) {
               //获取响应回的数据
               var value = xhr.responseText;
               //验证成功,将提交按钮设置为可用
               if ("验证成功" == value) {
                   $("msg").innerHTML="";
                   $("commitForm").disabled = false;
               }else{
                   //获取lable元素,并且将信息设置给lable对象
                   $("msg").innerHTML=value;
               }
           }
       }
   }
</script>
</head>
<body>
   <div class="container">
       <div class="row">
           <div class="col-md-3">
           </div>
           <div class="col-md-6"
               style="background: #fff; padding: 40px 20px; border: 6px solid #ccc;">
               <div class="col-sm-3"></div>
               <div class="col-sm-7"><font>用户注册</font>USER REGISTER<hr/></div>
               <form id="registform" class="form-horizontal" style="margin-top:10px;" method="post" action="${pageContext.request.contextPath}/register">
                   <div class="form-group">
                       <div class="col-sm-3"></div>
                       <div class="col-sm-6">
                           <label id="msg" style="color:red ;"></label>
                       </div>
                       <div class="col-sm-3"></div>
                   </div>
                   <div class="form-group">
                       <label for="username" class="col-sm-3 control-label">用户名</label>
                       <div class="col-sm-6">
                           <input type="text" class="form-control" id="username" name="username" onblur="checkUserName()"
                               placeholder="请输入用户名">
                       </div>
                       <div class="col-sm-3"></div>
                   </div>
                   <div class="form-group">
                       <label for="inputPassword3" class="col-sm-3 control-label">密码</label>
                       <div class="col-sm-6">
                           <input type="password" class="form-control" id="password" name="password" onblur=" checkPwd()"
                               placeholder="大写字母开头,长度为6-12位">
                       </div>
                       <div class="col-sm-3"></div>
                   </div>
                   <div class="form-group">
                       <label for="confirmpwd" class="col-sm-3 control-label">确认密码</label>
                       <div class="col-sm-6">
                           <input type="password" class="form-control" id="confirm_password" name="confirm_password" onblur=" valitadePwd()"
                               placeholder="请输入确认密码">
                       </div>
                   </div>
                   <div class="form-group">
                       <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                       <div class="col-sm-6">
                           <input type="email" class="form-control" id="inputEmail" name="email" onblur="validateEmail()"
                               placeholder="Email">
                       </div>
                   </div>
                   <div class="form-group">
                       <label for="usercaption" class="col-sm-3 control-label">姓名</label>
                       <div class="col-sm-6">
                           <input type="text" class="form-control" id="usercaption" name="name" onblur="validateName()"
                               placeholder="请输入姓名">
                       </div>
                   </div>
                   <div class="form-group">
                       <label for="inputEmail3" class="col-sm-3 control-label">联系方式</label>
                       <div class="col-sm-6">
                           <input type="number" class="form-control" id="telephone" name="telephone" onblur="validatTel()"
                               placeholder="请输入你的联系方式">
                       </div>
                   </div>
                   <div class="form-group">
                       <label for="date" class="col-sm-3 control-label">验证码</label>
                       <div class="col-sm-3">
                           <input type="text" class="form-control" id="validateCode" name="code" onblur="checkCode()">
                       </div>
                       <div class="col-sm-3">
                           <img id="myCode" src="${pageContext.request.contextPath}/bulideCode" title="看不清,换一张" style="cursor: pointer;" onclick=" changeCode()" />
                       </div>
                   </div>
                   <div class="form-group">
                       <div class="col-sm-3"></div>
                       <div class=" col-sm-9">
                       <input type="submit" id="commitForm" width="100" value="注册" name="submit" disabled="disabled"
                               style="background: url('./images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0); height: 35px; width: 100px; color: white;">
                       </div>
                   </div>
               </form>
           </div>
       </div>
   </div>
</body>
</html>

猜你喜欢