1. 银川网站建设
  2. 企业网站制作动态
  3. 银川网站建设制作:如何使用jQuery创建注册页验证

银川网站建设制作:如何使用jQuery创建注册页验证

银川网站建设制作

在本教程中，我将向您展示如何设置在旧浏览器上工作的前端验证。我还将使用由Yair甚至-或jQuery插件的jQuery插件名Validator jQuery插件。我们开始吧

完成本教程所需的资源

  • OpenSAN（Google字体）
  • 扁平图标
  • GooglejQuery托管库
  • 验证器jQuery插件
  • Reset.css
  • HTML 5 Shiv
  • 子模式背景
  • 时间和耐心

我们要做什么

print

查看演示

Setting Up

首先，我们需要在我们的头部分设置CSS和JavaScript库链接。




	
	Create a Flat Login/Sign up Page with Validation, Styling & Semantics Of Forms jQuery Plugin

HTML

对于HTML文件，我们将把所有内容包装在一个容器类中，然后是类平面设计表单，然后设置菜单选项卡，这是一个无序列表，带有一个类选项卡。

接下来，我们将创建一个带有登录ID的div，以及一个表单显示和类显示类。jQuery代码稍后将使用这两个类来隐藏和显示登录和注册部分。然后，我们将用类项包装项目。

  

        
Login


        

            

                
    
                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
    •

注意，我们使用的是语义数据-验证长度-范围=“6”。这将被我们的验证器jQuery插件银川网站建设制作使用，以限制在特定字段中输入的文本范围。要检查语义列表，可以使用这个jQuery插件，您可以在这里检查。

现在我们已经完成了登录部分，让我们移动到注册部分。对于注册部分，我们将使用具有ID寄存器和类表单显示和类隐藏的div包装所有内容。默认情况下，此部分将被隐藏。然后，再一次，我们将用一个项目类包装每个项目，并对特定的字段使用语义。


        
Register


        

            

                
    
                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
  • 
                        
    
                            
                        
    
                    
    • 

                    
    •

此时，您可以得到类似银川网站建设制作于下面的图像。

CSS

对于我们的CSS，让我们开始添加通用样式。这将包括主体和类容器的样式。

body {
  background: url('../img/low_contrast_linen_2X.png');
  color: fff;
  font-family: 'Open Sans';
}
.container{width: 960px; margin: 0 auto;}

现在，让我们调整菜单选项卡的样式。

.flat-design-form{
  background: #f58020;
  margin: 130px auto;
  width: 400px;
  height: auto;
  position: relative;
  font-family: 'Open Sans';
  -webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    1px 1px 2px 0px rgba(50, 50, 50, 0.75);
box-shadow:         1px 1px 2px 0px rgba(50, 50, 50, 0.75);

}
#login {
    padding-bottom: 20px;
}

#register {
    background: #0DA1FF;
    padding-bottom: 20px;
}

#login-tab {
    background: #f58020;
}

#register-tab {
    background: #0DA1FF;
}

span#login_icon {
    width: 16px;
    height: 16px;
    left: 8px;
    position: absolute;
    background: url(../img/login.png)no-repeat;
    display: block;
}

span#signup_icon {
    width: 16px;
    height: 16px;
    left: 110px;
    position: absolute;
    background: url(../img/sign-in.png)no-repeat;
    display: block;
}

.tabs {
  height: 40px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  position: relative;
  display: block;
  margin-bottom: 6px;

}
.tabs li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs a {

  display: block;
  float: left;
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 15px 30px 15px 30px;
   text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}

接下来，让我们开始对表单进行样式化。这将包括文本框及其特定类型字段。

.form-display {
  padding: 0 20px;
  position: relative;
}

.form-display h1 {
  font-size: 30px;
  padding: 10px 0 20px 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

form {
  padding-right: 20px !important;
}

form input[type=text],
form input[type=password],
form input[type=email],
form input[type=url]{
  width: 100%;
  outline: none;
  height: 40px;
  margin-bottom: 10px;
  padding-left: 15px;
  background: #fff;
  border: none;
  color: #545454;

   font-family: 'Open Sans';
  font-size: 13px;
}

.show {
  display: block;
}
.hide {
  display: none;
}

对于我们的按钮，我们将在底部给它一个边框，用一个十六进制颜色#1B78B2来创建一个漂亮的平按钮。然后，我们将设置它的悬停和活动状态。

.button-login{
    display: block;
    background: #0DA1FF;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #1B78B2;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #1B78B2;
  box-shadow: inset 0 -2px #1B78B2;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-login:hover {
  background: #1B78B2;

}

.button-register{
    display: block;
    background: #f58020;
    padding: 10px 30px;
	font-size: 14px;
    text-align: center;
    border-radius: 5px;
	font-family: 'Open Sans';
	color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  border: 0;
  border-bottom: 2px solid #c36518;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -2px #c36518;
  box-shadow: inset 0 -2px #c36518;

  	-webkit-transition: all 0.6s ease;
	  -moz-transition: all 0.6s ease;
	  transition: all 0.6s ease;
}

.button-register:hover {
  background: #fb7100;

}

.button-register:active {
  background: #136899;
}

之后，让我们为占位符设置样式。我们将使用选择器和供应商前缀银川网站建设制作来针对每个浏览器的类型。

::-webkit-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-moz-placeholder {
/* Firefox 18- */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

::-moz-placeholder {
/* Firefox 19+ */
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

:-ms-input-placeholder {
    font-size: 13px;
    font-family: 'Open Sans';
    color: #545454;
}

最后，为了使验证表单更加生动，我们将使用CSS 3动画为验证错误设置代码。我们将设置每个项目的位置相对，样式它的警告消息，并将它推到每个文本框的右侧。请注意，我们使用CSS 3转换属性在显示错误消息时产生平滑效果。

.item {
    position: relative;
}

.item .alert {
    float: left;
    margin: 0 0 0 20px;
    padding: 3px 10px;
    color: #FFF;
    border-radius: 3px 4px 4px 3px;
    background-color: #ef3030;
    max-width: 170px;
    white-space: pre;
    position: absolute;
    left: -15px;
    opacity: 0;
    z-index: 1;
    transition: .15s ease-out;
}

.item .alert::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    border-color: transparent #ef3030 transparent transparent;
    border-style: solid;
    border-width: 11px 7px;
    position: absolute;
    top: 5px;
    left: -10px;
}

.item.bad .alert {
    left: 0;
    opacity: 1;
    top: 5px;
    left: 343px;
    font-size: 12px;
    padding: 10px;
}

jQuery

对于菜单选项卡的jQuery代码，我们将放在下面的代码上。这将使用类显示和类隐藏来隐藏和显示登录和注册部分。

(function($) {
    // constants
    var SHOW_CLASS = 'show',
        HIDE_CLASS = 'hide',
        ACTIVE_CLASS = 'active';
    $('.tabs').on('click', 'li a', function(e) {
        e.preventDefault();
        var $tab = $(this),
            href = $tab.attr('href');
        $('.active').removeClass(ACTIVE_CLASS);
        $tab.addClass(ACTIVE_CLASS);
        $('.show').removeClass(SHOW_CLASS).addClass(HIDE_CLASS).hide();
        $(href).removeClass(HIDE_CLASS).addClass(SHOW_CLASS).hide().fadeIn(620);
    });
})(jQuery);

接下来，让我们添加以下代码来启用我们的验证器jQuery插件的功能。

      // initialize the validator function
      validator.message['date'] = 'not a real date';
      // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
      $('form').on('blur', 'input[required], input.optional, select.required', validator.checkField).on('change', 'select.required', validator.checkField).on('keypress', 'input[required][pattern]', validator.keypress);
      $('.multi.required').on('keyup blur', 'input', function() {
          validator.checkField.apply($(this).siblings().last()[0]);
      });
      // bind the validation to the form submit event
      //$('#send').click('submit');//.prop('disabled', true);
      $('form').submit(function(e) {
          e.preventDefault();
          var submit = true;
          // evaluate the form using generic validaing
          if (!validator.checkAll($(this))) {
              submit = false;
          }
          if (submit) this.submit();
          return false;
      });

Conclusion

就这样你完了！在本教程中，我们使用CSS 3和验证器jQuery插件创建了一个带有平滑动画和验证的平面网页。这不仅仅银川网站建设制作是您可以使用的jQuery插件。这里有大量的jQuery，但对我来说，我发现这很容易与用于警报消息的酷动画一起使用。

上一篇：银川网站建设案例:完成最初的Web设计客户会议的技巧 下一篇：银川网站建设书生商友:50个最有用的jQuery插件和库
返回列表

银川网站建热门新闻

随机推荐

新闻类别