js---表单校验 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            
            function checkInfo () {
                var uValue=document.getElementById("username").value;
                var span=document.getElementById("span_username");
                if(uValue.length<6)
                {
                    span.innerHTML="<font color='red' size='2'>用户名长度不得小于6</font>";
                }else{
                    if(/^[a-z]+$/.test(uValue))//符合要求的情况下
                        span.innerHTML="<font color='aqua' size='2'>用户名可用</font>";
                    else//不符合要求的情况下
                     span.innerHTML="<font color='red' size='2'>用户名需要全为英文</font>";
                }
            }
            
            
            function showtip(){
                var span=document.getElementById("span_username");
                span.innerHTML="<font color='red' size='2'>用户名长度不能小于6位，且为全英文</font>";
            }
            
            //密码的相关提示信息
            function pass_showTip(){
                var span=document.getElementById("span_password");
                span.innerHTML="<font color='red' size='2'>密码长度不小于8位，且需要使用数字字母两种字符</font>";
            }
            
            
            function pass_checkInfo(){
                pVlue=document.getElementById("password").value;
                var span=document.getElementById("span_password");
                if(pVlue.length<8){
                    span.innerHTML="<font color='red' size='2'>抱歉！密码长度不得小于8位</font>";
                }else{
                    if(/^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/.test(pVlue)){
                        //此时密码符合我们的预期要求
                        //规定，密码要同时具有数字和字母两种。
                        span.innerHTML="<font color='aqua' size='2'>符合</font>";
                    }else{//此时密码不符合规范
                        span.innerHTML="<font color='red' size='2'>抱歉！密码不符合规范</font>"
                    }
                }
            }
            
            //下面是邮箱的验证了
            function email_checkInfo(){
                var eValue=document.getElementById("email").value;
                var span=document.getElementById("span_email");
                if(eValue.match("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$")){
                    //此时符合邮箱的标准
                    span.innerHTML="<font color='aqua' size='2'>符合</font>"
                }else{
                    span.innerHTML="<font color='red' size='2'>抱歉！不符合要求</font>"
                }
            }
            
            //最后就是手机的正则匹配了
            function phone_checkInfo(){
                var phoneValue=document.getElementById("phone").value;
                var span=document.getElementById("span_phone");
                if(/^1[3456789]\d{9}$/.test(phoneValue))//此时手机号匹配成功
                    span.innerHTML="<font color='aqua' size='2'>符合</font>";
                else
                    span.innerHTML="<font color='red' size='2'>抱歉!不符合要求</font>"
            }
            
            //确认密码的操作
            function relpassword_checkInfo(){
                var relPValue=document.getElementById("relpassword").value;
                var pValue=document.getElementById("password").value;
                var span=document.getElementById("span_relpassword");
                if(pValue==relPValue){
                    span.innerHTML="<font color='aqua' size='2'>符合</font>"
                }else{
                    span.innerHTML="<font color='red' size='2'>抱歉！两次密码不一致</font>"
                }
            }
        </script>
    </head>
    <body>
        <script>
            //笔记：
            /*
             * onfocus:当获得焦点时启动相应的函数
             * onblur:当失去焦点时启动相应的函数
             * onkeyup:按键按下去之后手指抬起所触发的事件
             */
        </script>
        <form>
            用户名:<input type="text" name="username" id="username" onfocus="showtip()" onkeyup="checkInfo()" /><span id="span_username"></span><br />
            密码:<input type="password" name="password" id="password" onfocus="pass_showTip()" onblur="pass_checkInfo()" /><span id="span_password"></span><br />
            确认密码:<input type="password" name="relpassword" id="relpassword" onblur="relpassword_checkInfo()" /><span id="span_relpassword"></span><br />
            邮箱:<input type="email" name="email" id="email" onblur="email_checkInfo()" /><span id="span_email"></span><br />
            手机:<input type="text" name="phone" id="phone" onblur="phone_checkInfo()" /><span id="span_phone"></span><br />
        </form>
    </body>
</html>

 

posted @ 2019-07-17 14:51  薄眠抛却陈年事。  阅读(258)  评论(0)  编辑  收藏  举报