2. 程式人生 > >使用jQuery高效製作網頁特效 第九章習題

使用jQuery高效製作網頁特效 第九章習題

阿新 • • 發佈：2019-02-20

1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度註冊頁面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 12px;
            line-height: 25px;
        }

        .register {
            float: none;
            width: 503px;
            clear: both;
            margin: 0px auto;
        }

        .register dl {
            clear: both;
        }

        .register dt {
            width: 120px;
            text-align: right;
            padding-right: 5px;
            float: left;
        }

        .inputs {
            border: 1px solid #333;
            width: 120px;
            height: 20px;;
        }

        .register dl dd div {
            color: #ff0000;
            padding-left: 5px;
            display: inline;
        }

        .btn {
            width: 60px;
            text-align: center;
            height: 26px;
            margin: 5px 5px 0 0;
        }
    </style>
</head>

<body>
<div class="register">
    <div class="center"><img src="header1.jpg"/></div>
    <form action="success.html" method="post" id="myform">
        <dl>
            <dt>使用者名稱：</dt>
            <dd><input id="user" type="text" class="inputs"/>
                <div id="userId"></div>
            </dd>
        </dl>
        <dl>
            <dt>密碼：</dt>
            <dd><input id="pwd" type="password" class="inputs"/>
                <div id="pwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>確認密碼：</dt>
            <dd><input id="repwd" type="password" class="inputs"/>
                <div id="repwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>性別：</dt>
            <dd><input name="sex" type="radio" value="男"/>男 <input name="sex" type="radio" value="女"/>女
                <div id="sexId"></div>
            </dd>
        </dl>
        <dl>
            <dt>電子郵件：</dt>
            <dd><input id="email" type="text" class="inputs"/>
                <div id="emailId"></div>
            </dd>
        </dl>
        <dl>
            <dt>出生日期：</dt>
            <dd><select id="year">
                <script>
                    for (var i = 1900; i <= 2015; i++) {
                        document.write("<option value=" + i + ">" + i + "</option>");
                    }
                </script>
            </select>年
                <select id="month">
                    <script>
                        for (var i = 1; i <= 12; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>月
                <select id="day">
                    <script>
                        for (var i = 1; i <= 31; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>日
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="sub" type="submit" value="註冊" class="btn"/> <input name="cancel" type="reset" value="清除"
                                                                                class="btn"/></dd>
        </dl>
    </form>
</div>
</body>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#user").blur(function () {
            var user = $("#user").val();
            var userId = $("#userId");
            var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
            if (user == "") {
                userId.html("使用者名稱長度不能為空");
                return false;
            }
            else if (regUser.test(user) == false) {
                userId.html("使用者名稱必須由字母、數字和下劃線組成");
                return false;
            }
            userId.html("");
            return true;
        })


        $("#pwd").blur(function () {
            var pwd = $("#pwd").val();
            var pwdId = $("#pwdId");
            if (pwd == "") {
                pwdId.html("密碼不能為空");
                return false;
            }
            else if (pwd.length < 6 || pwd.length > 12) {
                pwdId.html("密碼長度為6-12字元");
                return false;
            }
            pwdId.html("");
            return true;
        })


        $("#repwd").blur(function () {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwdId = $("#repwdId");
            if (repwd != pwd) {
                repwdId.html("兩次輸入的密碼不一致");
                return false;
            }
            repwdId.html("");
            return true;
        })


        $("input[name='sex']").change(function(){
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            if (sex != '男' && sex != '女') {
                sexId.html("請選擇性別");
                return false;
            }else if(sex == '男' || sex == '女'){
                sexId.html("");
                return true;
            }
            sexId.html("");
            return true;
        });


        $("#email").blur(function () {
            var email = $("#email").val();
            var emailId = $("#emailId");
            var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if (email == "") {
                emailId.html("電子郵箱不能為空");
                return false;
            }
            else if (regEmail.test(email) == false) {
                emailId.html("郵箱不正確");
                return false;
            }
            emailId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var user = $("#user").val();
            var userId = $("#userId");
            var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
            if (user == "") {
                userId.html("使用者名稱長度不能為空");
                return false;
            }
            else if (regUser.test(user) == false) {
                userId.html("使用者名稱必須由字母、數字和下劃線組成");
                return false;
            }
            userId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var pwd = $("#pwd").val();
            var pwdId = $("#pwdId");
            if (pwd == "") {
                pwdId.html("密碼不能為空");
                return false;
            }
            else if (pwd.length < 6 || pwd.length > 12) {
                pwdId.html("密碼長度為6-12字元");
                return false;
            }
            pwdId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwdId = $("#repwdId");
            if (repwd != pwd) {
                repwdId.html("兩次輸入的密碼不一致");
                return false;
            }
            repwdId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            var email = $("#email").val();
            var emailId = $("#emailId");
            var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if (email == "") {
                emailId.html("電子郵箱不能為空");
                return false;
            }
            else if (regEmail.test(email) == false) {
                emailId.html("郵箱不正確");
                return false;
            }
            emailId.html("");
            return true;
        })



        $("#myform").submit(function () {
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            if (sex != '男' && sex != '女') {
                sexId.html("請選擇性別");
                return false;
            }
            return true;
        })
    })
</script>
</html>

2


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正則表示式驗證表單內容</title>
   <style>
       *{
           margin:0;
           padding:0;
           font-size:14px;
           line-height:20px;
       }
       .main{
           width:900px;
           margin: 0 auto;
       }
       .main dl{clear: both; height: 30px;}
       .main dl dt{
           text-align:right;
           float: left;
           width:180px;
           height:25px;
           padding-right:5px;
       }
       .inputs{
           width:130px;
           height:16px;
           border:solid 1px #666666;
           float:left;
           margin-right:5px;
       }
       .main dl dd div{
           display: inline;
           margin-left:10px;
           color:#F00;
       }
   </style>
</head>

<body>
<div class="main"><img src="logo.jpg" alt="logo"/>
    <form action="success.html" id="myform" method="post">
        <dl>
            <dt>使用者名稱：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()" /><div id="user_prompt"></div></dd>
        </dl>
        <dl>
            <dt>Email地址：</dt>
            <dd><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt"></div></dd>
        </dl>
        <dl>
            <dt>手機號碼：</dt>
            <dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()" /><div id="mobile_prompt"></div></dd>
        </dl>
        <dl>
            <dt>登入密碼：</dt>
            <dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" /><div id="pwd_prompt"></div></dd>
        </dl>
        <dl>
            <dt>密碼確認：</dt>
            <dd><input id="repwd" type="password"  class="inputs" onblur="checkRepwd()" /><div id="repwd_prompt"></div></dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="login.jpg" /></dd>
        </dl>
    </form>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
                $(function () {
                    $("#myform").submit(function () {
                         if(!checkUser()){
                           return false;
                         }
                        if(!checkEmail()){
                            return false;
                        }
                        if(!checkMobile()){
                            return false;
                        }
                        if(!checkPwd()){
                            return false;
                        }
                        if(!checkRepwd()){
                            return false;
                        }
                        return true;
                    })

                     })
        function checkUser() {
            var user = $("#user").val();
            var user_prompt = $("#user_prompt");
            var regUser = /^[a-zA-Z]\w{5,16}$/;
            if(user == "") {
                user_prompt.html("使用者名稱長度不能為空");
                return false;
            }
            else if (regUser.test(user) == false) {
                user_prompt.html("使用者名稱不正確");
                return false;
            }
            user_prompt.html("");
            return true;
        }


        function checkEmail() {
                var email = $("#email").val();
                var email_prompt = $("#email_prompt");
                var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
                if (email == "") {
                    email_prompt.html("電子郵箱不能為空");
                    return false;
                }
                else if (regEmail.test(email) == false) {
                    email_prompt.html("郵箱格式不正確，例如[email protected]");
                    return false;
                }
            email_prompt.html("");
                return true;
        }




        function checkMobile() {
            var mobile = $("#mobile").val();
            var mobile_prompt = $("#mobile_prompt");
            var regMobile = /^1[34578][0-9]{9}$/;
            if(mobile == "") {
                mobile_prompt.html("使用者名稱長度不能為空");
                return false;
            }
            else if (regMobile.test(mobile) == false) {
                mobile_prompt.html("使用者名稱不正確");
                return false;
            }
            mobile_prompt.html("");
            return true;
        }


        function checkPwd() {
            var pwd = $("#pwd").val();
            var pwd_prompt = $("#pwd_prompt");
            var regPwd=/^.*(?=.{4,10})(?=.*\d)(?=.*[A-Za-z]).*$/;
            if (pwd == "") {
                pwd_prompt.html("密碼不能為空");
                return false;
            }else if(regPwd.test(pwd)==false){
                $("#pwd_prompt").html("密碼包含字母和數字")
                return false;
            }
            else if (pwd.length < 4 || pwd.length > 10) {
                pwd_prompt.html("密碼長度為4-10字元");
                return false;
            }
            pwd_prompt.html("");
            return true;
        }
     
        
        
        
        function checkRepwd() {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwd_prompt = $("#repwd_prompt");
            if (repwd != pwd) {
                repwd_prompt.html("兩次輸入的密碼不一致");
                return false;
            }
            repwd_prompt.html("");
            return true;
        }

</script>
</body>
</html>

3

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>製作註冊驗證</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
            line-height:25px;
        }
        .main{
            width:470px;
            margin: 0 auto;
        }

        .main dl{clear: both; height: 30px;}
        .main dl dt{
            text-align:right;
            float: left;
            width:100px;
            height:25px;
            padding-right:5px;
        }
        .inputs{
            width:100px;
            height:16px;
            border:solid 1px #666666;
            float:left;
            margin-right:5px;
        }
        .main dl dd div{
            display: inline;
            margin-left:10px;
            color:#F00;
        }
    </style>
</head>

<body>
<div class="main"><img src="top2.jpg"  alt="top"/>
    <form action="" method="post" id="myform">
        <dl>
            <dt class="left">使用者名稱：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">密碼：</dt>
            <dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" onfocus="showPwd()" /><div id="pwd_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">&nbsp;</dt>
            <dd><input name="" type="image" src="sumbit_btn2.jpg" /></dd>
        </dl>
    </form>
</div>
<script type="text/javascript"src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#myform").submit(function () {
            if (!checkUser()) {
               return false;
            }
            if (!checkPwd()) {
             return false;
            }
            return true;
        })
    })
    function showUser(){
        $("#user_prompt").html("首位為字母的4-16個字母,數字,下劃線")
    }
    function showPwd(){
        $("#pwd_prompt").html("4-10個字母和下劃線")
    }
    function checkUser() {
        var regUser = /^[a-zA-Z]\w{4,16}$/;
        var user = $("#user").val();
        if (regUser.test(user) == false) {
            $("#user_prompt").html("使用者名稱不正確")
            return false;
        }

            $("#user_prompt").html("")
              return true;
    }
    function checkPwd(){
        var regPwd=/^[a-zA-Z_]{4,10}$/;
        var pwd = $("#pwd").val();
        if (regPwd.test(pwd)==false) {
            $("#pwd_prompt").html("密碼不正確")
            return false;
        }

            $("#pwd_prompt").html("")
        return true;
    }
</script>
</body>
</html>

相關推薦

使用jQuery高效製作網頁特效 第九章習題

1 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度註冊頁面</title> &

使用jQuery高效製作網頁特效 第八章習題

1 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遊戲推薦 </title> <

練習9（第九章習題）

als 設置 rgs 調試 test ack col on() sim package cn.ch.w; public class TestSimpleCircle { private double radius; // 構造方法,有參構造 p

第九章習題答案

linux第九章練習題答案?1. 區分 rpm -qi -qf -ql -qa四個不同選項組合的作用?rpm -qi //查詢已經安裝的某個rpm軟件包的信息?rpm -qf //查詢某個程序文件是由哪個rpm軟件包安裝的?rpm -ql //查詢某個rpm軟件包的所有安裝文件?rpm -qa //查詢所有已

java編程思想第四版第九章習題

思想 成員 clas xtend out sys body java編程思想 abstract 第三題 package net.mindview.interfaces; abstract class Base{ public Base(){ pr

《C++程式設計原理與實踐》第九章習題12答案

《C++程式設計原理與實踐》第九章習題12要改寫Date類，類實現不是用年月日的方法而是用距1970年1月1日的天數來實現。當時感到有點棘手，就搜尋了網上別人的實現方法，我看人實現還是保留了年月日，我覺得這違背了作者的本意。所以還是硬著頭皮自己寫。其實也不難，只是有一個小技巧

C++Primer第五版 第九章習題答案（31~40）

31：知識點1：容器的改變可能會使迭代器失效，插入和刪除各有其相關的規則，P315. 知識點2：必須保證每次改變容器的操作之後都正確的重新定位迭代器的操作 知識點3：呼叫erase()之後，其返回的迭代器指向的是序列中的下一個元素，其返回的迭代器可以用來更新 知識點4：

C++Primer第五版 第九章習題答案（41~50）

41：  #include<iostream> #include<string> #include<vector> using namespace std; void main() { vector<char> c{ 'a'

《快學Scala》第九章習題解答

RT。 package com.scalalearn.scala.main import java.io._ import scala.math._ import scala.collection.mutable.ArrayBuffer import scala.io.

使用jQuery快速高效製作網頁互動特效 第三章 上機練習三 製作課工場論壇發帖

 <script type="text/javascript"> //我要發帖 var num = 0; function Posting() { if (num == 0) { document.getElementsByClas

使用jQuery快速高效製作網頁互動特效 第六章 上機練習五 製作全網熱播視訊頁面

<script type="text/javascript"> $(function () { $("ul>li:not(:last)").css("margin-right","10px"); $("ul>li:not(:last) span,u

使用jQuery快速高效製作網頁互動特效 第五章 上機練習四 製作廣告圖片輪播切換效果

輪播應有的功能大致都有，分享給一些在學的朋友參考學習。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切

第九章CSS3製作網頁動畫知識點

變形函式translate()：平移函式，基於X、Y座標重新定位元素的位置scale()：縮放函式，可以使任意元素物件尺寸發生變化rotate()：旋轉函式，取值是一個度數值skew()：傾斜函式，取值是一個度數值transition呈現的是一種過渡，是一種動畫轉換的過程，如

第九章 利用CSS3制作網頁動畫

關鍵幀 屬性 平移 ID 位移 ide 效果 速度 style 一.CSS3變形 CSS3變形是一些效果的集合 如平移、旋轉、縮放、傾斜效果 每個效果都可以稱為變形（transform），它們可以分別操控元素發生平移、旋轉、縮放、傾斜等變化 二.CS

第九章 利用CSS3制作網頁動畫

1.5 linear brush 利用 媒體 判斷 true 100% 不能 一.CSS3變形transform 1.平移：translate(x,y) translateX(x) translateY(y) 註意：如果想只向X軸平移那麽可以trans

第九章：關於Jquery庫

文章目錄 第一節：瞭解Jquery ==jQuery版本介紹== ==jQuery下載與安裝== jQuery文件（API說明書） 線上版jQuery文件線上連

Python語言程式設計（MOOC崇天）第九章python計算生態概述學習筆記（霍蘭德人格分析雷達圖+玫瑰花製作）

複習：    今日學習： python計算生態概述 從資料出來到人工智慧 python庫之資料分析 numpy： pandas： Scipy： python庫之資料視覺化 Matpl

第九章 網絡文件共享服務之NFS

windows network 共享資源 服務器 計算機 nfs 9.1 nfs介紹9.1.1 nfs特點 NFS（Network File System）即網絡文件系統，是FreeBSD支持的文件系統中的一種，它允許網絡中的計算機之間通過TCP/IP網絡共享資源。 在NFS的應用

進擊的Python【第九章】：paramiko模塊、線程與進程、各種線程鎖、queue隊列、生產者消費者模型

password locking form maxsize 廁所 sorted [0 hostname nbsp 一、paramiko模塊 他是什麽東西？ 　　paramiko模塊是用python語言寫的一個模塊，遵循SSH2協議，支持以加密和認證的方式，進行遠程服務器的連

『Python』Numpy學習指南第九章_使用Matplotlib繪圖

from png 坐標 img 線圖 ylabel linspace 對數 nbsp 坐標軸調節以及刻度調節參見：『Python』PIL&plt圖像處理_矩陣轉化&保存圖清晰度調整 數據生成： 1 import numpy as np 2 import