首页>>表单>>Twitter 表单验证(2014-08-23)

Twitter 表单验证

Twitter 表单验证
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form class="form-horizontal" role="form" id="register">  
  2.                <div class="form-group">  
  3.                    <label for="firstname" class="col-sm-4 control-label">Firstname :</label>  
  4.                    <div class="col-sm-6">  
  5.                        <div class="input-group">  
  6.                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span>  
  7.                            </span>  
  8.                            <input type="text" class="form-control" name="firstname" placeholder="Firstname">  
  9.                        </div>  
  10.                        <label class="error" for="firstname"></label>  
  11.                    </div>  
  12.                </div>  
  13.                <div class="form-group">  
  14.                    <label for="lastname" class="col-sm-4 control-label">Lastname :</label>  
  15.                    <div class="col-sm-6">  
  16.                        <div class="input-group">  
  17.                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span>  
  18.                            </span>  
  19.                            <input type="text" class="form-control" name="lastname" placeholder="Lastname">  
  20.                        </div>  
  21.                        <label class="error" for="lastname"></label>  
  22.                    </div>  
  23.                </div>  
  24.                <div class="form-group">  
  25.                    <label for="username" class="col-sm-4 control-label">Username :</label>  
  26.                    <div class="col-sm-6">  
  27.                        <div class="input-group">  
  28.                            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span>  
  29.                            </span>  
  30.                            <input type="text" class="form-control" name="username" placeholder="Username">  
  31.                        </div>  
  32.                        <label class="error" for="username"></label>  
  33.                    </div>  
  34.                </div>  
  35.                <div class="form-group">  
  36.                    <label for="Password1" class="col-sm-4 control-label">Password :</label>  
  37.                    <div class="col-sm-6">  
  38.                        <div class="input-group">  
  39.                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span>  
  40.                            </span>  
  41.                            <input type="password" class="form-control" id="password1" name="password1" placeholder="Password">  
  42.                        </div>  
  43.                        <label class="error" for="password1"></label>  
  44.                    </div>  
  45.                </div>  
  46.                <div class="form-group">  
  47.                    <label for="password2" class="col-sm-4 control-label">Confirm Password :</label>  
  48.                    <div class="col-sm-6">  
  49.                        <div class="input-group">  
  50.                            <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span>  
  51.                            </span>  
  52.                            <input type="password" class="form-control" name="password2" placeholder="Confirm Password">  
  53.                        </div>  
  54.                        <label class="error" for="password2"></label>  
  55.                    </div>  
  56.                </div>  
  57.                <div class="form-group">  
  58.                    <label for="inputEmail" class="col-sm-4 control-label">Email :</label>  
  59.                    <div class="col-sm-6">  
  60.                        <div class="input-group">  
  61.                            <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>  
  62.                            </span>  
  63.                            <input type="email" class="form-control" name="inputEmail" placeholder="Email">  
  64.                        </div>  
  65.                        <label class="error" for="inputEmail"></label>  
  66.                    </div>  
  67.                </div>  
  68.                <div class="form-group">  
  69.                    <label for="phone" class="col-sm-4 control-label">Phone :</label>  
  70.                    <div class="col-sm-6">  
  71.                        <div class="input-group">  
  72.                            <span class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span>  
  73.                            </span>  
  74.                            <input type="tel" class="form-control" name="phone" placeholder="Valid contact number">  
  75.                        </div>  
  76.                        <label class="error" for="phone"></label>  
  77.                    </div>  
  78.                </div>  
  79.                <div class="form-group">  
  80.                    <div class="col-sm-offset-4 col-sm-6">  
  81.                        <div class="checkbox">  
  82.                            <label>  
  83.                                <input type="checkbox" name="agree">Please accept our policy  
  84.                            </label>  
  85.                        </div>  
  86.                        <label class="error" for="agree"></label>  
  87.                    </div>  
  88.                </div>  
  89.                <div class="form-group">  
  90.                    <div class="col-sm-offset-4 col-sm-6">  
  91.                        <button type="button" class="btn btn-default signup">Signup</button>  
  92.         <input type="hidden" name="register" />  
  93.         <label class="result"></label>  
  94.                    </div>  
  95.                </div>  
  96.            </form>  

 

JavaScript Code
  1. <script>  
  2.     $().ready(function () {  
  3.         $('form#register').validate({ // initialize the plugin  
  4.        success: function(label) {  
  5.         label.text("ok!").addClass("success"); //if valid add class  
  6.         },  
  7.        validClass: "success",  
  8.        rules: {  
  9.                 firstname: "required",  
  10.                 lastname: "required",  
  11.                 username: {  
  12.                     required: true,  
  13.                     minlength: 2  
  14.                 },  
  15.                 password1: {  
  16.                     required: true,  
  17.                     minlength: 5  
  18.                 },  
  19.                 password2: {  
  20.                     required: true,  
  21.             minlength: 5,  
  22.                     equalTo: "#password1"  
  23.                 },  
  24.                 inputEmail: {  
  25.                     required: true,  
  26.                     email: true  
  27.                 },  
  28.                 agree: "required",  
  29.                 phone: {  
  30.                     required: true,  
  31.                     digits: true,  
  32.                     minlength: 10,  
  33.                     maxlength: 10  
  34.   
  35.                 }  
  36.             },  
  37.             messages: {  
  38.                 firstname: "Enter your firstname",  
  39.                 lastname: "Enter your lastname",  
  40.                 username: {  
  41.                     required: "Please Enter username",  
  42.                     minlength: "Enter at least 2 characters"  
  43.                 },  
  44.                 password1: {  
  45.                     required: "Please confirm your password",  
  46.                     minlength: "Your password must be at least 5 characters long"  
  47.                 },  
  48.                 password2: {  
  49.                     required: "Please provide a password",  
  50.             minlength: "Your password must be at least 5 characters long",  
  51.                     equalTo: "Please enter the same password as above"  
  52.                 },  
  53.                 email: "Please enter a valid email address",  
  54.                 agree: "Please accept our policy",  
  55.                 phone: {  
  56.                     required: "Please enter phone number",  
  57.                     digits: "Please enter only digits",  
  58.                     minlength: "Please specify a valid phone number",  
  59.                     maxlength: "Please specify a valid phone number"  
  60.                 }  
  61.             }  
  62.         });  
  63.         $("button.signup").click(function () {  
  64.             var register = $('#register').valid(); // Checking valid form  
  65.             if (register) {  
  66.                 $.ajax({  
  67.                     type: "POST",  
  68.                     url: "process.php",  
  69.                     data: $('form#register').serialize(), //serialize form  
  70.                     success: function (msg) {  
  71.                        $("label.result").html(msg);       // Get status from process.php  
  72.                     }  
  73.                 });  
  74.             }  
  75.         });  
  76.   
  77.     });  
  78. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_405.html