zoukankan      html  css  js  c++  java
  • 表单验证模板

    <html>
        <head>
            <script src="check.js"></script>
            <style>
                span{
                    font-size:12px;
                }
                .stats1{
                    color:#aaa; <!-- 默认灰色 -->
                }
                
                .stats2{
                    color:#000;
                }
                
                .stats3{
                    color:red;
                }
                
                .stats4{
                    color:green;
                }
                
            </style>
        </head>
            
        <body>
            <form action="" method="" onsubmit="return regs('submit')">
                username:<input type="text" name="username" value="">
                <span class="stats1">请输入用户名</span><br/>
                password:<input type="password" name="password" value="">
                <span class="stats1">请输入密码</span><br/>
                repass:<input type="password" name="repass" value="">
                <span class="stats1">请再次输入密码</span></br/>
                email:<input type="text" name="email" value="">
                <span class="stats1">请输入邮箱</span><br/>
                other:<input type="text" name="other" value="">
                <span class="stats1">请输入其他</span><br/>
                <input type="submit" name="sub" value="submit">
            </form>
        </body>
    </html>
    //页面加载完自动调用
    onload=regs;
    
    //一个函数,可以使用onsubmit调用,也可以使用onload调用
    function regs(subm){//我们直接提交表单不会验证,怎么解决呢?我们需要让函数进行判断,直接点击提交的时候得到一个信号,所有验证都执行,使用参数
        var stat=true;
        var username=document.getElementsByName("username")[0];
        var password=document.getElementsByName("password")[0];
        var repass=document.getElementsByName("repass")[0];
        var email=document.getElementsByName("email")[0];
        var other=document.getElementsByName("other")[0];
        
        //为了省代码,使用下一个同胞获取span
        //alert(username.nextSibling.nodeName);/前面这种方式有可能控件后面是空格或者图片,所以我们使用一个小算法得到span
        //alert(gspan(username).nodeName);
        check(username,"用户名的长度要在3-20之间",function(val){
            //if(val.match(/^S+$/) && val.length>=3 &&username.value.length<=20){
            if(val.match(/^S{3,20}$/)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check(password,"密码必须在6-20位之间",function(val){
            //if(val.match(/^S+$/) && val.length>=6 &&val.length<=20){
            if(val.match(/^S{6,20}$/)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check(repass,"确认密码要和上面一致,规则也要相同",function(val){
            //if(val.match(/^S+$/) && val.length>=6 &&val.length<=20 && val==password.value ){
            if(val.match(/^S{3,20}$/) && val==password.value ){ 
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        
        check(email,"要按邮箱规则输入",function(val){
            if(val.match(/w+@w+.w+/)){
                return true;
            }else{
                stat=false;
                return false;
            }
        },subm);
        return stat;
    }
    
    function gspan(cobj){//找到下一个span
        while(true){
            if(cobj.nextSibling.nodeName!="SPAN"){
                cobj=cobj.nextSibling;
            }else{
                return cobj.nextSibling;
            }
            
        }
        
    }
    /*
        通用检查方法:
            第一个参数:obj,用来检查的对象
            第二个参数:info,用来检查的提示信息
            第三个参数:fun,用来检查值是否按条件输入
            第四个参数:subm,状态判定,分清是点击提交还是失去焦点
    */
    function check(obj,info,fun,subm){
        var sp=gspan(obj);
        obj.onfocus=function(){//得到焦点提示
            //var sp=gspan(username);
            sp.innerHTML=info
            sp.className="stats2";
        }
        obj.onblur=function(){
            //if(username.value.match(/^S+$/) && username.value.length>=3 &&username.value.length<=20){
            if(fun(this.value)){
                sp.innerHTML="输入正确";
                sp.className="stats4";
            }else{
                sp.innerHTML=info;
                sp.className="stats3";
            }
        }
        if(subm=="submit"){
            obj.onblur();
        }
    }
  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/aigeileshei/p/5619249.html
Copyright © 2011-2022 走看看