溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML中怎么用正則表達(dá)式實(shí)現(xiàn)表格驗(yàn)證

發(fā)布時(shí)間：2021-02-26 10:01:41 來源：億速云 閱讀：260 作者：清風(fēng) 欄目：web開發(fā)

這篇文章主要為大家展示了HTML中怎么用正則表達(dá)式實(shí)現(xiàn)表格驗(yàn)證，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“HTML中怎么用正則表達(dá)式實(shí)現(xiàn)表格驗(yàn)證”這篇文章吧。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。  3、平臺(tái)無關(guān)性：超級(jí)文本標(biāo)記語言能夠在廣泛的平臺(tái)上使用，這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或?yàn)g覽器。

HTML用正則表達(dá)式檢驗(yàn)表格的實(shí)例代碼：

<span style="font-size:24px;color:#cc6600;"> 正則表達(dá)式在JavaScript腳本中是很好用的檢驗(yàn)語法規(guī)則的方法。但是與Java中的正則表達(dá)式有所不同。它需要在regex規(guī)則上以“^”開始，以"$"結(jié)束。</span>
<span style="font-size:24px;color:#cc6600;">以下讓我們看看一個(gè)實(shí)例。</span>
<span style="font-size:18px;"><!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        form table tr td{  
            border: 1px solid lightgrey;  
            text-align: center;  
        }  
        form table tr td input{  
            width: 97%;  
        }  
    </style>  
    <script language="JavaScript" type="text/javascript">  
        //判斷規(guī)則（正則表達(dá)式）  
    function goto() {  
     var name = document.getElementById("name");  
     var pwd = document.getElementById("pwd");  
     var pwd2 = document.getElementById("pwd2");  
     var pnum = document.getElementById("pnum");  
     var phone = document.getElementById("phone");  
     var telephone = document.getElementById("telephone");  
     var email = document.getElementById("email");  
        if (name.value.trim().length<=8){  
            alert("用戶名長(zhǎng)度必須大于八位");  
            name.focus()  
            name.value="";  
            return;  
        }  
//        規(guī)則必須包括大小寫字母，數(shù)字  
        var regex = /^(?!(?:\d+|[a-zA-Z]+|[\da-z]+|[\dA-Z])$)[\da-zA-Z]{6,}$/;  
//        var regex = /^[A-z0-9]{10,20}$/;  
        if ( !pwd.value.match(regex)){  
            alert("密碼不符合規(guī)定");  
            pwd.focus()  
            pwd.value="";  
            return;  
        }  
        if (pwd.value != pwd2.value){  
            alert("兩次輸入的密碼不相同");  
            pwd2.focus()  
            pwd.value="";  
            pwd2.value="";  
            return;  
        }  
        var rege=/^\d{17}X$|^\d{15}$/;  
        if (!rege.test(pnum.value)){  
            alert("身份證不符合規(guī)定");  
            pnum.focus()  
            pnum.value="";  
            return;  
        }  
        var regex2 = /^\d{4}-\d{7}$/;//判斷座機(jī)號(hào)  
        if (!regex2.test(phone.value)){  
            alert("座機(jī)號(hào)碼不符合規(guī)定");  
            phone.focus()  
            phone.value="";  
            return;  
        }  
        var regex3 = /^1[3,5,7,8]\d{9}$/;  
        if (!regex3.test(telephone.value)){  
            alert("手機(jī)號(hào)碼不符合規(guī)定");  
            telephone.focus()  
            telephone.value="";  
            return;  
        }  
        //test方法必須用反斜杠轉(zhuǎn)義  
        var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
        if (!regex4.test(email.value)){  
            alert("郵箱不符合規(guī)定");  
            email.focus()  
            email.value="";  
            return;  
        }  
    }  
    </script>  
</head>  
<body>  
<form>  
    <table style="width:600px;height: 300px;border: 1px solid lightgrey">  
        <tr>  
            <td width="18%">登錄名:</td>  
            <td><input id="name"type="text"></td>  
            <td width="50%">長(zhǎng)度大于八位</td>  
        </tr>  
        <tr>  
            <td>登錄密碼:</td>  
            <td><input   id="pwd"type="password"></td>  
            <td>長(zhǎng)度大于十位，包含字母數(shù)字</td>  
        </textarea></td>  
        </tr>  
        <tr>  
            <td>確認(rèn)密碼:</td>  
            <td><input id="pwd2" type="password"></td>  
        </tr>  
        <tr>  
            <td>身份證號(hào)碼:</td>  
            <td><input  id="pnum" type="text"></td>  
            <td>15位或18位最后一個(gè)是X</td>  
        </tr>  
        <tr>  
            <td>固定電話:</td>  
            <td><input   id="phone"type="text"></td>  
            <td>格式xxxx-xxxxxxx</td>  
        </tr>  
        <tr>  
            <td>手機(jī)號(hào)碼:</td>  
            <td><input   id="telephone"type="text"></td>  
            <td>11位整數(shù)</td>  
        </tr>  
        <tr>  
            <td>電子郵件:</td>  
            <td><input   id="email"type="text"></td>  
            <td>xxxx@xxx.xxx  xxx@xxx.xxx.xx</td>  
        </tr>  
        <tr>  
            <td>現(xiàn)居住地:</td>  
            <td><select>  
                <option>--選擇省份--</option>  
                <option>北京</option>  
                <option>河北</option>  
                <option>廣西</option>  
            </select></td>  
            <td><select>  
                <option>--選擇城市--</option>  
                <option>煙臺(tái)</option>  
                <option>青島</option>  
                <option>哈爾濱</option>  
            </select></td>  
        </tr>  
        <tr>  
            <td colspan="1"></td>  
            <td><input id="submit" type="button" value="提交注冊(cè)信息" style="width: 100px" onclick="goto()"></td>  
            <td><input type="reset" value="重置" style="width: 60px"></td>  
        </tr>  
    </table>  
</form>  
</body>  
</html></span>

附:一些常使用的規(guī)則：

"^\\d+$"　　//非負(fù)整數(shù)（正整數(shù) + 0）

"^[0-9]*[1-9][0-9]*$"　　//正整數(shù)

"^((-\\d+)|(0+))$"　　//非正整數(shù)（負(fù)整數(shù) + 0）

"^-[0-9]*[1-9][0-9]*$"　　//負(fù)整數(shù)

"^-?\\d+$"　　　　//整數(shù)

"^\\d+(\\.\\d+)?$"　　//非負(fù)浮點(diǎn)數(shù)（正浮點(diǎn)數(shù) + 0）

"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮點(diǎn)數(shù)

"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮點(diǎn)數(shù)（負(fù)浮點(diǎn)數(shù) + 0）

"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//負(fù)浮點(diǎn)數(shù)

"^(-?\\d+)(\\.\\d+)?$"　　//浮點(diǎn)數(shù)

"^[A-Za-z]+$"　　//由26個(gè)英文字母組成的字符串

"^[A-Z]+$"　　//由26個(gè)英文字母的大寫組成的字符串

"^[a-z]+$"　　//由26個(gè)英文字母的小寫組成的字符串

"^[A-Za-z0-9]+$"　　//由數(shù)字和26個(gè)英文字母組成的字符串

"^\\w+$"　　//由數(shù)字、26個(gè)英文字母或者下劃線組成的字符串

"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址

"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

以上就是關(guān)于“HTML中怎么用正則表達(dá)式實(shí)現(xiàn)表格驗(yàn)證”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)
推薦閱讀：
  1. html 表格
  2. HTML表格

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手