1. 程式人生 > >js驗證表單

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>