html5--javascript的一系列操作(事件、正则表达式的验证)

朱雀 2022-09-24 05:20 100阅读 0赞

效果展示：

![Center][]

如何实现：

![Center 1][]

代码实现：

![Center 2][]

代码实现：

<html>
    	<meta charset="utf-8" >
        <form action="table3.php" method="post" >
            <fieldset>
                <legend>用户页面</legend>
                <p>
                    <label>用户名</label>
                    <input type="text" name="username" id="username" οnblur="fun(this);">
                    <span id="s_username"></span>
                </p>
                <p>
                    <label>密码</label>
                    <input type="password" name="pwd" id="pwd" οnblur="fun2(this);">
                    <span id="s_pwd"></span>
                </p>
                <p>
                    <label>手机号</label>
                    <input type="text" name="tel" id="tel" οnblur="fun3(this);">
                    <span id="s_tel"></span>
                </p>
                <p>
                    <label>邮箱</label>
                    <input type="text" name="email" id="email" οnblur="fun4(this);">
                    <span id="s_email"></span>
                </p>
                <p>
                    <input type="submit" value="注册">
                </p>
            </fieldset>
        </form>
    </html>
    <script>
        function fun(obj){
            var username=obj.value;
            var reg=/^[a-zA-Z_]\w{5,}$/;
            if(reg.test(username)){
                document.getElementById('s_username').innerHTML="<font color='blue'>ok</font>";
                return true;
            }else{
                document.getElementById('s_username').innerHTML="<font color='red'>用户名由6位字母组成不能由数字开头</font>";
                return false;
            }
        }
        function fun2(obj){
            var pwd=obj.value;
            var reg=/^\d{6,}$/;
            if(reg.test(pwd)){
                document.getElementById('s_pwd').innerHTML="<font color='blue'>ok</font>";
                return true;
            }else{
                document.getElementById('s_pwd').innerHTML="<font color='red'>密码必须6位数字以上</font>";
                return false;
            }
        }
        function fun3(obj){
            var tel=obj.value;
            var reg=/^\d{11}$/;
            if(reg.test(tel)){
                document.getElementById('s_tel').innerHTML="<font color='blue'>ok</font>";
                return true;
            }else{
                document.getElementById('s_tel').innerHTML="<font color='red'>手机号必须为11位数字</font>";
                return false;
            }
        }
        function fun4(obj){
            var email=obj.value;
            var reg= /\w+@\w+\.(com|cn)/;
            if(reg.test(email)){
                document.getElementById('s_email').innerHTML="<font color='blue'>ok</font>";
            }else{
                document.getElementById('s_email').innerHTML="<font color='red'>邮箱必须包含@和com</font>";
            }
        }
    </script>

![Center 3][]

代码实现：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body,a{ font-size: 14px; color: #555;;}
            .wordCount{ position:relative;width: 600px; }
            .wordCount textarea{ width: 100%; height: 100px;}
            .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}
            .wordCount .word{ color: red; padding: 0 4px;;}
        </style>
    </head>
    <body>
    
    
    <div class="wordCount" id="wordCount">
        <textarea placeholder="textarea还剩余字数统计"></textarea>
        <span class="wordwrap"><var class="word">300</var>/300</span>
    </div>
    
    
    <script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>
    <script>
        $(function(){
            //先选出 textarea 和 统计字数 dom 节点
            var wordCount = $("#wordCount"),
                textArea = wordCount.find("textarea"),
                word = wordCount.find(".word");
            //调用
            statInputNum(textArea,word);
    
        });
        /*
        * 剩余字数统计
        * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
        */
        function statInputNum(textArea,numItem) {
            var max = numItem.text(),
                curLength;
            textArea[0].setAttribute("maxlength", max);
            curLength = textArea.val().length;
            numItem.text(max - curLength);
            textArea.on('input propertychange', function () {
                numItem.text(max - $(this).val().length);
            });
        }
    </script>
    </div>
    </body>
    </html>

[Center]: /images/20220719/62f93bb0208d4ffc939d8a9953800188.png
[Center 1]: /images/20220719/e2e8f950c13c42069962e6f656d3545b.png
[Center 2]: /images/20220719/abd4d396cc6d4552b5f8b1a776bcdfdd.png
[Center 3]: /images/20220719/ce7a9b03d2c74d87a8714a427ec69c73.png