>  기사  >  웹 프론트엔드  >  일반 유효성 검사 양식을 보여주는 HTML 예

일반 유효성 검사 양식을 보여주는 HTML 예

高洛峰
高洛峰원래의
2017-03-11 11:45:021122검색

이 글에서는 HTML에서 테이블을 확인하기 위해 정규식을 사용하는 예제 코드를 주로 소개합니다. 코드가 간단하고 이해하기 쉽고, 참조 가치가 높으며, 필요한 친구들이 참고할 수 있습니다.

정규식 검사 테이블의 예제 코드를 공유해 드리겠습니다. 구체적인 코드 내용은 다음과 같습니다.


<span style="font-size:24px;color:#cc6600;"> 正则表达式在JavaScript脚本中是很好用的检验语法规则的方法。但是与Java中的正则表达式有所不同。它需要在regex规则上以“^”开始,以"$"结束。</span>


<span style="font-size:24px;color:#cc6600;">以下让我们看看一个实例。</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">  
        //判断规则(正则表达式)  
    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("用户名长度必须大于八位");  
            name.focus()  
            name.value="";  
            return;  
        }  
//        规则必须包括大小写字母,数字  
        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("密码不符合规定");  
            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("身份证不符合规定");  
            pnum.focus()  
            pnum.value="";  
            return;  
        }  
        var regex2 = /^\d{4}-\d{7}$/;//判断座机号  
        if (!regex2.test(phone.value)){  
            alert("座机号码不符合规定");  
            phone.focus()  
            phone.value="";  
            return;  
        }  
        var regex3 = /^1[3,5,7,8]\d{9}$/;  
        if (!regex3.test(telephone.value)){  
            alert("手机号码不符合规定");  
            telephone.focus()  
            telephone.value="";  
            return;  
        }  
        //test方法必须用反斜杠转义  
        var regex4 = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
        if (!regex4.test(email.value)){  
            alert("邮箱不符合规定");  
            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%">长度大于八位</td>  
        </tr>  
        <tr>  
            <td>登录密码:</td>  
            <td><input   id="pwd"type="password"></td>  
            <td>长度大于十位,包含字母数字</td>  
        </textarea></td>  
        </tr>  
        <tr>  
            <td>确认密码:</td>  
            <td><input id="pwd2" type="password"></td>  
        </tr>  
        <tr>  
            <td>身份证号码:</td>  
            <td><input  id="pnum" type="text"></td>  
            <td>15位或18位最后一个是X</td>  
        </tr>  
        <tr>  
            <td>固定电话:</td>  
            <td><input   id="phone"type="text"></td>  
            <td>格式xxxx-xxxxxxx</td>  
        </tr>  
        <tr>  
            <td>手机号码:</td>  
            <td><input   id="telephone"type="text"></td>  
            <td>11位整数</td>  
        </tr>  
        <tr>  
            <td>电子邮件:</td>  
            <td><input   id="email"type="text"></td>  
            <td>xxxx@xxx.xxx  xxx@xxx.xxx.xx</td>  
        </tr>  
        <tr>  
            <td>现居住地:</td>  
            <td><select>  
                <option>--选择省份--</option>  
                <option>北京</option>  
                <option>河北</option>  
                <option>广西</option>  
            </select></td>  
            <td><select>  
                <option>--选择城市--</option>  
                <option>烟台</option>  
                <option>青岛</option>  
                <option>哈尔滨</option>  
            </select></td>  
        </tr>  
        <tr>  
            <td colspan="1"></td>  
            <td><input id="submit" type="button" value="提交注册信息" style="width: 100px" onclick="goto()"></td>  
            <td><input type="reset" value="重置" style="width: 60px"></td>  
        </tr>  
    </table>  
</form>  
</body>  
</html></span>

첨부: 일반적으로 사용되는 일부 규칙:

"^\d+$" //음수가 아닌 정수(양의 정수 + 0) )

"^ [0-9]*[1-9][0-9]*$" // 양의 정수

"^((-\ d+)|(0+))$" // 양이 아닌 정수(음의 정수 + 0)

"^-[0-9]*[1-9][0-9] *$" // 음의 정수

"^-?\d+$"   //정수

"^\d+(\.\d+)?$"   / /음수가 아닌 부동 소수점 수(양의 부동 소수점 수 + 0)

"^(([0-9]+\.[0-9]*[1-9][0- 9]*)|([0-9]*[1-9 ][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9] *))$" //양수 부동 소수점 수

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$" //양수가 아닌 부동 소수점 수(음수 부동 소수점 수 + 0)

"^(-(([0-9]+\.[0-9]*[1-9] [0-9]*)|([0-9]*[1-9] [0-9]*\.[0-9]+)|([0-9]*[1-9][0 -9]*)))$" // 음수 부동 소수점 수

"^(-?\d+)(\.\d+)?$" // 부동 소수점 수

"^[A-Za-z]+$" // 26개로 구성 영문자로 구성된 문자열

"^[A-Z]+$" //구성된 문자열 영문 대문자 26자 중

"^[a-z] +$" //영문 소문자 26자로 구성된 문자열

"^[A-Za-z0- 9]+$" //숫자, 영문 26자리로 구성된 문자열 String

"^\w+$" //숫자, 영문 26자리, 밑줄로 구성된 문자열

"^[\w-]+( \.[\w-]+)*@[\w-]+(\.[\w-]+)+$"   //이메일 주소

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

위는 편집자가 소개한 테이블을 확인하기 위해 정규식을 사용한 HTML의 예제 코드입니다. 도움이 되셨으면 좋겠습니다. 궁금한 사항이 있으시면 남겨주세요. 메시지를 보내주시면 편집자가 제때에 답변해 드릴 것입니다. 또한 Script House 웹사이트를 지원해 주신 모든 분들께 감사의 말씀을 전하고 싶습니다!

위 내용은 일반 유효성 검사 양식을 보여주는 HTML 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.