🏗 表单插件
🛖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表单验证
jqueryvalidationjs_30">🍉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>
javascript">//配置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目标元素周围显示了。
- 常用来做表单提交错误提示
javascript">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
javascript">// 表单提交提示
$(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();
}
});
});
效果图