当前位置: 首页 > 工具软件 > Validation > 使用案例 >

Form Validation

毋承基
2023-12-01
<html>
<head>
     <title>Profile</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="bootstrap/js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/membership.css"/>
    <style type="text/css">
        body{background: #c0c0c0}
        .bgwhite{background:#fff;}
        .ptb10{padding-top: 10px;padding-bottom: 10px;}
        .ptb20{padding-top: 20px;padding-bottom: 20px;}
        .imgholder{height:200px;width: 200px;background: #521412; margin: 0 auto;}
        .custom-size{font-size: 3em;}
        
        .unit-box{padding: 0px 10px;background: #fff;}
        .unit-icon{display:inline-block;height: 50px;width: 50px; padding:5px; background: antiquewhite;float: left;}
        .unit-right{display:inline-block;height: 50px;width: 180px;padding:5px; overflow: hidden; word-wrap: break-word; background: antiquewhite;}
        .unit-right>p{margin-bottom: 0px;}

        #aboutme.tab-content{padding: 10px;}        
    </style>
   <script type="text/javascript">
       
    function comfirmPsd(p1,p2){
         var spanEl= document.getElementById("tip");  
        if(p1.value!=p2.value||p1.value==''||p2.value==''){
            //incorrect password.
            p2.setCustomValidity('Password incorrect');
           // spanEl.innerHTML="Password is incorrect.";
        }else{
           //correct.
             p2.setCustomValidity('');
            //spanEl.innerHTML="";
        }
    }
    $(function () {
        $("#changePwd").click(function () {
            $("#Password").toggle();
            if ($("#Password").is(":visible")) {
                $(this).text("Cancel");
				$("#Password").focus();
                $("#Password").select();
            } else {
                $(this).text("ChangePassword");
                $("#Password").val($("#pwd").val());
            }
        })
    });
</script>
</head>
    <body id="paragraph">        
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6  col-lg-6  col-sm-offset-3 col-md-offset-3 col-lg-offset-3">
                <ul class="nav nav-tabs nav-justified">
                    <li role="presentation" class="active"><a href="#aboutme" data-toggle="tab">ABOUTME</a></li>
                    <li role="presentation" class="disabled"><a href="#resume">RESUME</a></li>
                    <li role="presentation" class="disabled"><a href="#portfolio">PORTFOLIO</a></li>
                    <li role="presentation" class="disabled"><a href="#contact">CONTACT</a></li>
                </ul>
            </div>
        </div>
        <div class="row" >
            <div class="bgwhite tab-content ptb20 col-md-8 col-md-offset-2">
                <!--About Me-->
                <div id="aboutme" class="tab-pane fade in active ptb20">
                    <div class="col-md-4">
                        <div class="imgholder img-rounded"></div>
                    </div>
                    <div  class="col-md-8">
                        <form >
                            <div class="col-md-9">
                                <h1>Sunny<small> - Sunny Luthra</small></h1>
                                <h3><span class="glyphicon glyphicon-envelope"></span>Michael.wu@gkfx.com</h3>
                                <h3 class="disabled"><span class="glyphicon glyphicon-phone"></span>+86 13524199512</h3>
                                <h3>
                                    <input type="password" id="Password1"  placeholder="password" required/>
                                    <input type="password" id="Password2" 
                                           οnfοcus="comfirmPsd(document.getElementById('Password1'),this)" 
                                           οninput="comfirmPsd(document.getElementById('Password1'),this)"  required placeholder="password"/>
                                </h3>
                                <a class="btn btn-primary" id="changePwd">Change Password</a>
                          </div>
                            <div class="col-md-3"><input class="btn btn-primary btn-block" type="submit" value="Save"/></div>
                        </form>
                    </div>
                    <div class="clearfix"></div>
                    
                    <div class="ptb20 col-md-4">
                        <div class="unit-box">
                            <div class="unit-icon">
                                <i class="glyphicon glyphicon-envelope custom-size"></i>
                            </div>
                           <div class="unit-right">
                               <p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
                               <p>Michael.wu</p>
                            </div>
                        </div>
                    </div>
                   <div class="ptb20 col-md-4">
                        <div class="unit-box">
                            <div class="unit-icon"><i class="glyphicon glyphicon-envelope custom-size"></i></div>
                           <div class="unit-right">
                               <p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
                               <p>Michael.wu</p>
                            </div>
                        </div>
                    </div>
            <div class="ptb20 col-md-4">
                        <div class="unit-box">
                            <div class="unit-icon"><i class="glyphicon glyphicon-envelope custom-size"></i></div>
                           <div class="unit-right">
                               <p class="unit-title" ><strong>Michael.wu@gkfx.com</strong></p>
                               <p>Michael.wu</p>
                            </div>
                        </div>
                    </div>
                </div>         
        
            
                <!--RESUME-->
                <div id="resume" class="tab-pane fade in">
                    <div style="width:400px; padding:40px 40px; background:red;">
                     <div style="width:40px;  float:left; background:blue; display:block; color:white;"> H </div>
                     <div style="width:300px; float:left; background:green; display:block; color:white;">
                         Habam güm güm güm <br> hello worldhello worldhello worldhello worldhello worldhello worldhello 
                         worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello 
                         worldhello worldhello worldhello worldhello world
                    </div>
                    <div style="clear:both;"></div>
  
                    </div>
                </div>
                <div id="portfolio" class="tab-pane fade in">
                    <h1>PORTFOLIO</h1>
                </div>
                 <div id="contact" class="tab-pane fade in">
                    <h1>CONTACT</h1>
                </div>
            </div>
        </div>
    </body>
</html>

客户端验证有许多验证属性,使用都很方便,最近有个密码确认验证不知用什么属性可以使用。在网上搜索可以使用以上方法使用可以保持验证的效果保持一致。

引用地址:引用地址

 类似资料:

相关阅读

相关文章

相关问答