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="用户名长度不得小于6";
                }else{
                    if(/^[a-z]+$/.test(uValue))//符合要求的情况下
                        span.innerHTML="用户名可用";
                    else//不符合要求的情况下
                     span.innerHTML="用户名需要全为英文";
                }
            }
            
            
            function showtip(){
                var span=document.getElementById("span_username");
                span.innerHTML="用户名长度不能小于6位,且为全英文";
            }
            
            //密码的相关提示信息
            function pass_showTip(){
                var span=document.getElementById("span_password");
                span.innerHTML="密码长度不小于8位,且需要使用数字字母两种字符";
            }
            
            
            function pass_checkInfo(){
                pVlue=document.getElementById("password").value;
                var span=document.getElementById("span_password");
                if(pVlue.length<8){
                    span.innerHTML="抱歉!密码长度不得小于8位";
                }else{
                    if(/^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/.test(pVlue)){
                        //此时密码符合我们的预期要求
                        //规定,密码要同时具有数字和字母两种。
                        span.innerHTML="符合";
                    }else{//此时密码不符合规范
                        span.innerHTML="抱歉!密码不符合规范"
                    }
                }
            }
            
            //下面是邮箱的验证了
            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="符合"
                }else{
                    span.innerHTML="抱歉!不符合要求"
                }
            }
            
            //最后就是手机的正则匹配了
            function phone_checkInfo(){
                var phoneValue=document.getElementById("phone").value;
                var span=document.getElementById("span_phone");
                if(/^1[3456789]\d{9}$/.test(phoneValue))//此时手机号匹配成功
                    span.innerHTML="符合";
                else
                    span.innerHTML="抱歉!不符合要求"
            }
            
            //确认密码的操作
            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="符合"
                }else{
                    span.innerHTML="抱歉!两次密码不一致"
                }
            }
        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>

 

转载于:https://www.cnblogs.com/byczyz/p/11201016.html

你可能感兴趣的:(js---表单校验)