jquery系列插件总结

🏗 表单插件

🛖select 下拉框插件

🍉select2 下拉框插件

select2官网

两步配置即可完成使用：html的class配置，javascript配置

<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

效果图

🛖validate表单验证

🍉jqueryvalidation.js验证插件

validation表单验证

两部配置

• html表单内加入required属性
• js 配置验证规则，错误提示模板

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

//配置validator
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
// 扩展验证方法：
//日期
jQuery.validator.addMethod("isDate", function(value, element){
	var ereg = /^(\d{1,4})(-|\/)(\d{1,2})(-|\/)(\d{1,2})$/;
	var r = value.match(ereg);
	if (r == null) {
		return false;
	}
	var d = new Date(r[1], r[3] - 1, r[5]);
	var result = (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[5]);
	
	return this.optional(element) || (result);
}, "请输入正确的日期");

// 
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
  // 失去焦点就验证
     onfocusout: function(element) { $(element).valid(); }, 
     // 自定义错误显示模板
     errorPlacement: function (error, element) {
                      if (element.parent().hasClass("input-group")) {
                          element.parent().after(error);
                      }
                      else
                          element.after(error)
                  },
     rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字符组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

🛖日期插件

🍉foundation-datepicker.js

日期插件

简单易用，可以轻松实现指定日期之前的禁用

效果图

🏗 提示框

🛖Opentip

Opentip

js配置一下即可

• 可以配置target元素，就会在target目标元素周围显示了。
• 常用来做表单提交错误提示

var myOpentip = new Opentip($("#element"));

myOpentip.show(); // Shows the tooltip immediately
myOpentip.hide(); // Hides the tooltip immediately
myOpentip.prepareToShow(); // Shows the tooltip after the given delays. This could get interrupted
myOpentip.prepareToHide(); // ...

myOpentip.deactivate();
myOpentip.activate();

myOpentip.setContent("New content"); // Updates Opentips content

// 表单提交提示
$(function() {
  // Start when document loaded
  var myInput = $("#my-input");
  var inputOpentip = new Opentip(myInput, { showOn: null, style: 'alert' });

  // Hide the tooltip on focus so we don't bother the user while editing.
  myInput.focus(function() { inputOpentip.hide(); });
  myInput.change(function() {
    if (myInput.val()) {
      // Everything fine
      inputOpentip.hide();
    }
    else {
      // Oh oh
      inputOpentip.setContent("Please fill out this field.");
      inputOpentip.show();
    }
  });

});

效果图