天天看點
傳回

正規表達式和表單驗證

表單驗證：

1.非空驗證

判斷非空最好不要用trim()方法，不相容，推薦使用正規表達式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>送出表單</title>
        <script type="text/javascript">
            function trim (txt) {
                var afterText = txt.replace(/^\s*/,'').replace(/\s*$/,'');
                return afterText;
            }

            function login () {
                var uname = document.getElementById("username").value;
                var div1  = document.getElementById("div1");
                var form1 = document.getElementById("form1");
                if(trim(uname)==""){
                    //提示非空
                    div1.innerHTML = "<font color='red'>使用者名不能為空</font>";
                }else{
                    //送出表單
                    form1.submit();
                }
            }

            window.onload = function(){
                var btn1 = document.getElementById("btn1");
                btn1.onclick = login;
            }
        </script>
    </head>
    <body>
        <h2>使用者登入</h2>
        <div id="div1">

        </div>
        <form id="form1" action="登入成功.html" method="post"><!--get不會出現500内部伺服器錯誤-->
            使用者名<input type="text" name="username" id="username"/>
            <input type="button" name="btn1" id="btn1" value="登入" />
        </form>

    </body>
</html>

二、驗證是否是數字

示例：

if(trim(uname)==""){
                    //提示非空
                    div1.innerHTML = "<font color='red'>商品數量不能為空</font>";
                }else if(isNaN(trim(uname))){
                    div1.innerHTML = "<font color='red'>商品數量必須為整數</font>";
                }else{
                    //送出表單
                    form1.submit();
                }

三、驗證郵箱

示例：

function isMail (email) {
                var regExp = /^\d{5,10}@\w+\.(com|net|org)$/;
                var flag = regExp.test(email);
                return flag;
            }

四、驗證手機号

示例：

function isPhone (phone) {
                var regExp = /^([-]{}|[-]{}|[-]{})\d{}$/;
                var flag = regExp.test(phone);
                return flag;
            }

綜合起來，使用正規表達式實作使用者注冊頁面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #form1{
                /*font-family: "楷體";*/
                font-family: "微軟雅黑";
                font-style: normal;
            }

            label {
                width: em;
                display: inline-block;
            }

            #div1{
                color: red;
            }
            span.error {
                color: red;
                background: url(imgs/unchecked.gif) no-repeat px center;
                padding-left: px;
            }

            span.success {
                background: url(imgs/checked.gif) no-repeat px center;
                padding-left: px;
            }

            #username[value],#pwd[value],#phone[value],#mail[value],#pwd2[value]{
                opacity: ;
            }

        </style>

        <script src="../jsJava庫/hashMap.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            var regBtn;
            var uname ;
//          var errMsg = "<img src='imgs/unchecked.gif'/>使用者名不正确";
//          var successMsg = "<img src='imgs/checked.gif'/>";
            var form1;
            var span1;
            var pwd;
            var span2;
            var mail;
            var span3;
            var phone;
            var span4;
            var pwd2;
            var span5;
            var map1 = new HashMap();
            var beijing = ['海澱區','大興區','朝陽區','豐台區'];
            var shanxi = ['太原','大同','晉中','呂梁'];
            var henan = ['鄭州','開封','洛陽'];
            map1.put('北京',beijing);
            map1.put('山西',shanxi);
            map1.put('河南',henan);


            var provns = map1.keyArr;
            var citys;


            function trim (txt) {
                var afterTxt = txt.replace(/^\s*/,'').replace(/\s*$/,'');
                return afterTxt;
            }

            function mouseIn () {
                uname.value="";
                unameYanzheng();
            }

            function mouseOut () {
                unameYanzheng();
            }

            function unameYanzheng () {
                span1.innerHTML = "";
                if(uname.value=="請輸入使用者名"){
                    //不能不輸入
                    span1.innerHTML = "使用者名不正确";
                    span1.className = "error";

                }else if(trim(uname.value)==""){
                    span1.innerHTML = "使用者名不能為空";
                    span1.className = "error";
                }else if(trim(uname.value).length<){
                    span1.innerHTML = "使用者名長度至少6個字元";
                    span1.className = "error";
                }else{
                    span1.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn2 () {
                pwd.value="";
                pwd.type="password";
                pwdYanzheng();
            }

            function mouseOut2 () {
                pwdYanzheng();
            }

            function pwdYanzheng () {
                span2.innerHTML = "";
                if(pwd.value=="請輸入密碼"){
                    //不能不輸入
                    span2.innerHTML = "密碼不正确";
                    span2.className = "error";

                }else if(trim(pwd.value)==""){
                    span2.innerHTML = "密碼不能為空";
                    span2.className = "error";
                }else if(trim(pwd.value).length<||trim(pwd.value).length>){
                    span2.innerHTML = "密碼長度6-20個字元";
                    span2.className = "error";
                }else{
                    span2.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn5 () {
                pwd2.value="";
                pwd2.type="password";
                pwd2Yanzheng();
            }

            function mouseOut5 () {
                pwd2Yanzheng();
            }

            function pwd2Yanzheng () {
                span5.innerHTML = "";
                if(pwd2.value=="請輸入密碼"){
                    //不能不輸入
                    span5.innerHTML = "密碼不正确";
                    span5.className = "error";

                }else if(trim(pwd2.value)==""){
                    span5.innerHTML = "密碼不能為空";
                    span5.className = "error";
                }else if(trim(pwd2.value).length<||trim(pwd2.value).length>){
                    span5.innerHTML = "密碼長度6-20個字元";
                    span5.className = "error";
                }else if(trim(pwd2.value)!=trim(pwd.value)){
                    span5.innerHTML = "兩次輸入密碼不一緻";
                    span5.className = "error";  
                }else{
                    span5.className = "success";
//                  form1.submit();
                }
            }

            function mouseIn3 () {
                mail.value="";
                mailYanzheng();
            }

            function mouseOut3 () {
                mailYanzheng();
            }

            function isMail (email) {
                var regExp = /^\d{5,10}@\w+\.(com|net|org)$/;
                var flag = regExp.test(email);
                return flag;
            }

            function mailYanzheng () {
                span3.innerHTML = "";
                if(mail.value=="請輸入郵箱"){
                    //不能不輸入
                    span3.innerHTML = "郵箱格式不正确";
                    span3.className = "error";

                }else if(trim(mail.value)==""){
                    span3.innerHTML = "郵箱格式不能為空";
                    span3.className = "error";
                }else if(!isMail(trim(mail.value))){
                    span3.innerHTML = "郵箱格式不正确";
                    span3.className = "error";
                }else{
                    span3.className = "success";
                }
            }

            function mouseIn4 () {
                phone.value="";
                phoneYanzheng();
            }

            function mouseOut4 () {
                phoneYanzheng();
            }

            function isPhone (phone) {
                var regExp = /^(15[0-9]{1}|18[0-9]{1}|13[0-9]{1})\d{8}$/;
                var flag = regExp.test(phone);
                return flag;
            }

            function phoneYanzheng () {
                span4.innerHTML = "";
                if(phone.value=="請輸入手機号"){
                    //不能不輸入
                    span4.innerHTML = "手機号格式不正确";
                    span4.className = "error";

                }else if(trim(phone.value)==""){
                    span4.innerHTML = "手機号不能為空";
                    span4.className = "error";
                }else if(!isPhone(trim(phone.value))){
                    span4.innerHTML = "手機号格式不正确";
                    span4.className = "error";
                }else{
                    span4.className = "success";
                }
            }

            function yanzheng () {
                uname.onblur();
                pwd.onblur();
                mail.onblur();
                phone.onblur();

                //通過span的 error屬性 的個數 判斷有沒有錯誤的資訊
                var errorSpanArr = document.getElementsByClassName("error");

                if(errorSpanArr.length>){//有錯誤的資訊
                    //不送出表單
//                  regBtn.disabled = "disabled";
alert('請正确填寫資訊！');
                }else{
//                  regBtn.disabled ="";
                    //送出表單
                    form1.submit();
                }

            }

            window.onload = function(){
                regBtn = document.getElementById("regBtn");
                form1 = document.getElementById("form1");
                //使用者名
                uname = document.getElementById("username");
                span1 = uname.nextSibling;
                uname.onfocus = mouseIn;
                uname.onblur = mouseOut;
                uname.onkeyup = unameYanzheng;

                //密碼
                pwd = document.getElementById("pwd");
                span2 = pwd.nextSibling;
                pwd.onfocus = mouseIn2;
                pwd.onblur = mouseOut2;
                pwd.onkeyup = pwdYanzheng;

                //确認密碼
                pwd2 = document.getElementById("pwd2");
                span5 = pwd2.nextSibling;
                pwd2.onfocus = mouseIn5;
                pwd2.onblur = mouseOut5;
                pwd2.onkeyup = pwd2Yanzheng;

                //郵箱
                mail = document.getElementById("mail");
                span3 = mail.nextSibling;
                mail.onfocus = mouseIn3;
                mail.onblur = mouseOut3;
                mail.onkeyup = mailYanzheng;

                //手機号
                phone = document.getElementById("phone");
                span4 = phone.nextSibling;
                phone.onfocus = mouseIn4;
                phone.onblur = mouseOut4;
                phone.onkeyup = phoneYanzheng;

                //進入網頁，就驗證，有錯不能點注冊
//              yanzheng();
                regBtn.onclick = yanzheng;

                var provnsNode = document.getElementById("provinces");
                var provn;
                var provnTextNode;
                for(var i in provns){
                    provn = document.createElement("option");
                    provnTextNode = document.createTextNode(provns[i]);
                    provn.appendChild(provnTextNode);
                    provnsNode.appendChild(provn);
                }

            }

            function selectProvinces (obj) {
                var opt = obj.options[obj.selectedIndex];
                var cityNode = document.getElementById("citys");
                //删除已添加結點，然後重新添加
                cityNode.length=;
                var city ;
                var cityTextNode ;
                for(var i in provns){
                    if(opt.text==provns[i]){
                        citys = map1.get(provns[i]);
                        for(var j in citys){
                            city = document.createElement("option");
                            cityTextNode = document.createTextNode(citys[j]);
                            city.appendChild(cityTextNode);
                            cityNode.appendChild(city);
                        }
                    }
                }

            }
        </script>

    </head>
    <body>
        <fieldset id="fieldset1">
            <legend>使用者注冊</legend>
            <form id="form1" action="handle.html" method="post">

            <label for="username">使用者名</label>*&emsp;<input type="text" name="username" id="username" value="請輸入使用者名" /><span></span><br/>
            <label for="pwd">密&emsp;碼</label>*&emsp;<input type="text" name="pwd" id="pwd" value="請輸入密碼" /><span></span><br/>
            <label for="pwd2">确認密碼</label>*&emsp;<input type="text" name="pwd2" id="pwd2" value="請确認密碼" /><span></span><br/>
            <label for="mail">郵&emsp;箱</label>*&emsp;<input type="text" name="mail" id="mail" value="請輸入郵箱" /><span></span><br/>
            <label for="phone">手機号</label>*&emsp;<input type="text" name="phone" id="phone" value="請輸入手機号" /><span></span><br/>
            <label for="provinces">請選擇您的居住地--</label><br/>
            省：
            <select id="provinces" onchange="selectProvinces(this);">
                <option value="" selected="selected">請選擇</option>
            </select>
            市：
            <select id="citys" >
                <option value="" selected="selected">請選擇</option>
            </select>
            <br/>
            <br/>
            <div id="div1">
                * 為必填項。
            </div><br/>
            <input id="regBtn" type="button" value="注冊"/>

            </form>
        </fieldset>

    </body>
</html>

看了這麼多正規表達式在現實中的應用，現在了解一下基本的正規表達式知識。

在js中，正規表達式以 /正規表達式/ 存在。

^以…開始 ； $以…結束 ； \s空白、空格、tab、回車 ； *貪婪模式，最大限度的比對字元串 ； \w 表示字元word ; . 表示轉義 . ; \d 表示數字digit ;{5,10} 表示數量5-10個 ；+ 表示一個或多個 ； ? 表示0個或1個 ; {5} 表示5個， {5，} 表示 5個或5個以上 ； [0,9] 表示範圍0-9

還有很多正規表達式：

例：20個常用的正規表達式

正規表達式和表單驗證
表單驗證 正規表達式 驗證郵箱和電話号碼 非空驗證 常用的正規表達式
上一篇: 正規表達式之表單驗證
下一篇: html 正規表達式驗證郵箱,正規表達式實作郵箱驗證的功能

繼續閱讀