使用js和正則表達式實現表單的驗證

時間 2019-11-13

原文原文鏈接

今天給你們分享一個form表單的驗證，主要驗證範圍有姓名、性別、年齡和身份證號等一些經常使用的信息。說到驗證，主要是經過正則表達式來規範和驗證你所輸入的信息，用正則的約束和你所輸入的信息做比較顯示差別，從而獲得驗證的結果，即「經過」或者「不經過」。在本篇中我使用了onblur事件，onblur 屬性在元素失去焦點時觸發，onblur 經常使用於表單驗證代碼（例如用戶離開表單字段）。javascript

提示：onblur 屬性與 onfocus 屬性相反。css

一：首先，咱們先來看結果，下面展現的是最終功能界面

二：其次來看看body部分

<body>
    <div id="box">
        <form onsubmit="return check()" action="register_success.html">
            <fieldset>
                <legend>信息註冊表</legend>
                <p>
                    <label>姓名：</label>
                    <input type="text" id="txtname" class="txt" onblur="Name()" />
                    <span id="span_name">由2~-6個漢字組成</span>
                </p>
                <p>
                    <label>密碼：</label>
                    <input type="password" id="txtpwd" class="txt" onblur="Password()" />
                    <span id="span_pwd">請輸入6~8個字符</span>
                </p>
                <p>
                    <label>確認密碼：</label>
                    <input type="password" id="txtpwd2" class="txt" onblur="Password2()" />
                    <span id="span_pwd2">再次確認密碼</span>
                </p>

                <p>
                    <label>性別：</label>
                    <input type="text" id="txtsex" class="txt" onblur="Sex()" />
                    <span id="span_sex">選男或女</span>
                </p>

                <p>
                    <label>年齡：</label>
                    <input type="text" id="txtage" class="txt" onblur="Age()" />
                    <span id="span_age">由大於9小於100的數字組成</span>
                </p>

                <p>
                    <label>身份證號：</label>
                    <input type="text" id="txtnum" class="txt" onblur="Num()" />
                    <span id="span_num">由18位數字組成</span>
                </p>

                <p>
                    <label>學籍號：</label>
                    <input type="text" id="txtstu" class="txt" onblur="Stu()" />
                    <span id="span_stu">由12位數字組成</span>
                </p>

                <p>
                    <label>血型：</label>
                    <input type="text" id="txtxue" class="txt" onblur="Xuexing()" />
                    <span id="span_xue">填A、B、AB或O型血</span>
                </p>

                <p>
                    <label>地址：</label>
                    <input type="text" id="txtarea" class="txt" onblur="Area()" />
                    <span id="span_area">很多於8個漢字</span>
                </p>
                <p>
                    <label>郵箱：</label>
                    <input type="text" id="txtemail" class="txt" onblur="Email()" />
                    <span id="span_email">如jack@163.com</span>
                </p>
                <hr />
                <div id="box1">
                    <p id="sub">
                        <input type="submit" value="提交" />
                        <input type="button" value="取消" />
                    </p>
                </div>
            </fieldset>
        </form>
    </div>
</body>

三：最後是js部分，也就是正則表達式的主要內容了

  <script type="text/javascript">
        function Name() {
            //驗證姓名
            var name = document.getElementById("txtname").value; //獲取你所填寫的信息
            var nameReg = /^[\u4e00-\u9fa5]{2,6}$/;  //定義約束,要求輸入2到6箇中文
            if (!nameReg.test(name)) {   //判斷
                var t = span_name.innerHTML = "請輸入2~6個漢字!"; //輸入不合法，則顯示提示信息
                return false;
            }
            else {
                span_name.innerHTML = "格式正確"; //驗證經過後提示
                return true;
            }
        }
        function Password() {
            //密碼
            var pwd = document.getElementById("txtpwd").value;
            var reg = /^[\d\w]{6,12}$/;
            if (!reg.test(pwd)) {
                span_pwd.innerHTML = "請輸入6~12之內數字、字母或組合密碼";
            }
            else {
                span_pwd.innerHTML = "格式正確";
            }
        }

        function Password2() {
            //確認密碼
            var pwd = document.getElementById("txtpwd").value;
            var pwd2 = document.getElementById("txtpwd2").value;
            if (pwd != pwd2) {
                span_pwd2.innerHTML = "兩次輸入不一致";
            }
            else {
                span_pwd2.innerHTML = "格式正確";
            }
        }

        function Sex() {
            //驗證性別
            var sex = document.getElementById("txtsex").value;
            var sexReg = /^男$|^女$/;
            if (!sexReg.test(sex)) {
                span_sex.innerHTML = "請輸入男或女!";
                return false;
            }
            else {
                span_sex.innerHTML = "格式正確";
                return true;
            }
        }

        function Age() {
            //驗證年齡
            var age = document.getElementById("txtage").value;
            var ageReg = /(^[1-9][0-9]?$)|^100$/;
            if (!ageReg.test(age)) {
                span_age.innerHTML = "請輸入1~100的數字!";
                return false;
            }
            else {
                span_age.innerHTML = "格式正確";
                return true;
            }
        }

        function Num() {
            //驗證身份證號（15位數或者是18位數最後一位是大寫字母X）
            var num = document.getElementById("txtnum").value;
            var numReg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
            if (!numReg.test(num)) {
                span_num.innerHTML = "請輸入15或18位的身份證號!";
                return false;
            }
            else {
                span_num.innerHTML = "格式正確";
                return true;
            }
        }

        function Stu() {
            //驗證學號
            var stu = document.getElementById("txtstu").value;
            var stuReg = /^\d{12}$/;
            if (!stuReg.test(stu)) {
                span_stu.innerHTML = "請輸入12位的數字!";
                return false;
            }
            else {
                span_stu.innerHTML = "格式正確";
                return true;
            }
        }

        function Xuexing() {
            //驗證血型
            var xue = document.getElementById("txtxue").value;
            var xueReg = /^A$|^B$|^AB$|^O$/;
            //var xueReg = /^AB$|^[A-Z]$/;

            if (!xueReg.test(xue)) {
                span_xue.innerHTML = "請輸入A,B,AB或O型血!";
                return false;
            }
            else {
                span_xue.innerHTML = "格式正確";
                return true;
            }
        }

        function Area() {
            //驗證地址
            var area = document.getElementById("txtarea").value;
            var areaReg = /^[\u4e00-\u9fa5]{8,}$/;
            if (!areaReg.test(area)) {
                span_area.innerHTML = "請輸入很多於8個漢字!";
                return false;
            }
            else {
                span_area.innerHTML = "格式正確";
                return true;
            }
        }
        function Email() {
            //郵箱驗證
            var email = document.getElementById("txtemail").value;
            var reg1 = /^[\w\d]{1,9}@[\w\d]{1,9}\.[\w]{2,3}$/;
            if (!reg1.test(email)) {
                span_email.innerHTML = "錯誤!如:jack@163.com";
            }
            else {
                span_email.innerHTML = "格式正確";
            }
        }
    </script>

四：最後的最後，爲了稍微美觀好看一些，咱們仍是加點樣式吧。

<style type="text/css">
        body {
            font-size: 15px;
        }

        fieldset {
            width: 450px;
            margin: auto auto;
            border: 1px solid #ccc;
        }

        legend {
            margin-left: 180px;
        }

        p {
            margin: 20px auto;
        }

        /*input框*/
        .txt {
            color: blue;
            border: 1px solid orange;
            width: 150px;
            padding-left:5px;
        }

        span {
            color: red;
            font-size: 13px;
        }

        #box1 > p > input {
            margin-left: 100px;
        }
    </style>

結語：
本文使用純js打造，在上述的input框的取值中，我用的是value；

val()是在有jQuery插件的時候才能用，value是在沒有jQuery插件的狀況下也能用。val()是jQuery根據原生JS裏面的value寫出來的函數。最後但願進來看過本篇的朋友都能有所收穫，也但願大牛們不吝賜教、指出不足之處。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。