欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)功能

 更新時(shí)間:2022年05月30日 09:12:30   作者:zhangsan3333  
這篇文章主要介紹了JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)功能,在JS中默認(rèn)是模糊匹配,只要字符串包含了正則表達(dá)式的內(nèi)容就返回true,本文通過(guò)案例分析給大家介紹的非常詳細(xì),需要的朋友可以參考下

Java和JavaScript正則表達(dá)式的對(duì)比 Java中也有正則表達(dá)式,默認(rèn)情況下必須要精確匹配 ;而在JS中默認(rèn)是模糊匹配,只要字符串包含了正則表達(dá)式的內(nèi)容就返回true

正則表達(dá)式匹配字符串Java中匹配結(jié)果JavaScript中匹配結(jié)果
\d{3}a123bfalsetrue
^\d{3}123bfalsetrue
\d{3}$a123falsetrue
^\d{3}$123truetrue

注冊(cè)信息校驗(yàn)

需求

  1. 在JS中使用正則表達(dá)式進(jìn)行驗(yàn)證。
  2. 用戶名:只能由英文字母和數(shù)字組成,長(zhǎng)度為4~16個(gè)字符,并且以英文字母開(kāi)頭
  3. 密碼: 大小寫(xiě)字母和數(shù)字6-20個(gè)字符
  4. 確認(rèn)密碼:兩次密碼要相同
  5. 電子郵箱: 符合郵箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
  6. 手機(jī)號(hào):/^1[34578]\d{9}$/
  7. 生日:生日的年份在1900~2009之間,生日格式為1980-5-12或1988-05-04的形式,/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/

案例分析

  • 創(chuàng)建正則表達(dá)式
  • 得到文本框中輸入的值
  • 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false
  • 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true
  • 寫(xiě)一個(gè)驗(yàn)證表單中所有的項(xiàng)的方法,所有的方法都返回true,這個(gè)方法才返回true.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>驗(yàn)證注冊(cè)頁(yè)面</title>
    <style type= "text/css">
        body {
            margin: 0;
            padding: 0;
            font‐size: 12px;
            line‐height: 20px;
        }
        .main {
            width: 525px;
            margin‐left: auto;
            margin‐right: auto;
        }
        .hr_1 {
            font‐size: 14px;
            font‐weight: bold;
            color: #3275c3;
            height: 35px;
            border‐bottom‐width: 2px;
            border‐bottom‐style: solid;
            border‐bottom‐color: #3275c3;
            vertical‐align: bottom;
            padding‐left: 12px;
        }
        .left {
            text‐align: right;
            width: 80px;
            height: 25px;
            padding‐right: 5px;
        }
        .center {
            width: 280px;
        }
        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }
        .red {
            color: #cc0000;
            font‐weight: bold;
        }
        div {
            color: #F00;
        }
        </style>
    <script type="text/javascript">
        //驗(yàn)證表單中所有的項(xiàng)
        function checkAll () {
//所有的方法都返回true,這個(gè)方法才返回true
            return checkUser() && checkMail();
        }
        //驗(yàn)證用戶名
        function checkUser () {
//1. 創(chuàng)建正則表達(dá)式
            var reg = /^[a‐zA‐Z][a‐zA‐Z0‐9]{3,15}$/;
//2. 得到文本框中輸入的值
            var value = document.getElementById("user").value;
//3. 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false
            if (reg.test(value)==false) {
                document.getElementById("userInfo").innerHTML = "用戶名不正確";
                return false;
            }
//4. 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true
            else {
                document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            }
        }
        //驗(yàn)證郵箱
        function checkMail () {
            //1. 創(chuàng)建正則表達(dá)式
            var reg = /^\w+@\w+(\.[a‐zA‐Z]{2,3}){1,2}$/;
//2. 得到文本框中輸入的值
            var value = document.getElementById("email").value;
//3. 如果不匹配,在后面的span中顯示錯(cuò)誤信息,返回false
            if (reg.test(value)==false) {
                document.getElementById("emailInfo").innerHTML = "郵箱格式不正確";
                return false;
            }
//4. 如果匹配,在后面的span中顯示一個(gè)打勾圖片,返回true
            else {
                document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
                return true;
            }
        }
    </script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
        </tr>
        <tr>
            <td class="hr_1">新用戶注冊(cè)</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!‐‐ 長(zhǎng)度為4~16個(gè)字符,并且以英文字母開(kāi)頭 ‐‐>
                        <td class="left">用戶名:</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
                            <span style="color: red" id="userInfo"></span>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能為空, 輸入長(zhǎng)度大于6個(gè)字符 ‐‐>
                        <td class="left">密碼:</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in" />
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能為空, 與密碼相同 ‐‐>
                        <td class="left">確認(rèn)密碼:</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能為空, 郵箱格式要正確 ‐‐>
                        <td class="left">電子郵箱:</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
                            <span id="emailInfo" style="color: red;"></span>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能為空, 使用正則表達(dá)式自定義校驗(yàn)規(guī)則,1開(kāi)頭,11位全是數(shù)字 ‐‐>
                        <td class="left">手機(jī)號(hào)碼:</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <!‐‐ 不能為空, 要正確的日期格式 ‐‐>
                        <td class="left">生日:</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg" />
                        </td>
                    </tr>
                </table></td>
        </tr>
    </table>
</form>
</body>
</html>

在這里插入圖片描述

到此這篇關(guān)于JavaScript正則表達(dá)式實(shí)現(xiàn)注冊(cè)信息校驗(yàn)的文章就介紹到這了,更多相關(guān)js正則表達(dá)式注冊(cè)信息校驗(yàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論