jquery - 插件

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. 使用插件

* 基本内容

* 插件的出现就是为了简化jQuery的开发

* 种类多达上千种

* 插件注意

* 必须先引入jQuery文件

* 再引入jQuery插件文件

1.日期插件 - layDate

* 注意

* 目前几乎所有的日期插件都源于jQuery插件

* 但是所有日期插件都脱离了jQuery

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>laydate插件的选项</title>
<script src="jquery-1.11.3.js"></script>
<script src="laydate/laydate.js"></script>
</head>
<body>
<input type="text" class="laydate-icon">
<script>
$("input").focus(function(){
/*
laydate插件提供显示日期控件的方法
定义一个input文本框
* class="laydate-icon" - 是由laydate插件提供
* onclick="laydate()" - 是由laydate插件提供
laydate(options)
* options - 选项,格式为 { key : value }
* 选项
* format - 日期格式
默认格式为 YYYY-MM-DD hh:mm:ss(标准格式)
* istime - 是否开启时间选择
* 默认值为false,不开启
* isclear - 是否显示清空按钮
* istoday - 是否显示今天按钮
* issure - 是否显示确认按钮
*/
laydate({
format : "YYYY年MM月DD日",
istime : true,
isclear : true,
istoday : true,
issure : true
});
});
</script>
</body>
</html>

复制代码

效果：

点击文本框：

2。表单验证插件

* 如何使用

* 引入jquery.validation.js文件

* 引入validation插件的样式文件

* 如何实现

* 获取表单,调用validate()方法进行验证

* 该方法接收选项

{

debug : true,//调试模式(表单不提交)

// 表示表单验证成功后回调函数(完成表单提交)

submitHandler : function(){},

rules : {//设置验证规则

key : value

* key - 表单元素的name属性值

* value - 验证规则名称

},

messages : {//设置错误信息

key : value

* key - 表单元素的name属性值

* value - 设置错误信息

}

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证插件</title>
<script src="jquery-1.11.3.js"></script>
<script src="validate/jquery.validate.js"></script>
<link rel="stylesheet" href="validate/css/screen.css">
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="pwd">Password</label>
<input id="pwd" name="password" type="password">
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
/*
jQuery的表单验证插件的机制
* 获取对应表单,调用表单验证方法validate()
* 向validate()传递表单验证的规则
* 验证规则
* required - 验证不能为空
* minlength - 验证最小长度
* equalTo - 验证当前元素值是否等于指定元素值
// 设置表单验证的规则
rules : {
* key - 指定表单元素的name属性值
* value - 设置对应的验证规则名称
* 字符串类型 - 使用单个验证规则
* 对象类型 - 使用多个验证规则
key : value
},
// 设置表单验证不通过时的错误信息
messages : {
* key - 指定表单元素的name属性值
* value - 设置错误信息
key : value
}
*/
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#pwd"
}
},
messages: {
firstname: "请输入你的用户名",
lastname: "还要再输入姓名啊亲!!",
password: {
required: "密码不能为空",
minlength: "密码长度要为5位数"
},
confirm_password:{
required:"密码不能为空",
minlength:"长度不的少于5个",
equalTo:"密码与前面要一至"},
}
});
</script>
</body>
</html>

复制代码

效果：

点击Submit按钮：

* 验证规则

* 自定义验证规则

$.validator.addMethod(name,method,message)

* name - 设置自定义验证规则的名称

* method - 函数,function(value,element,param){}

* message - 自定义验证规则的(默认)错误信息

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validation插件案例</title>
<link rel="stylesheet" href="validate/css/screen.css">
<script src="jquery-1.11.3.js"></script>
<script src="validate/jquery.validate.js"></script>
<script src="validate/messages_zh.js"></script>
</head>
<body>
<fieldset>
<legend>用户注册验证</legend>
<form id="myform" name="myform" action="#" method="post">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="user" name="user"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd" name="pwd"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="repwd" name="repwd"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="mail" name="mail"></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" id="phone" name="phone"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
</fieldset>
<script>
$.validator.addMethod("checkPhone",function(value,element,param){
var reg=/^1[3-9][0-9]{9}$/;
if(reg.test(value)){
return true;
}else{
return false;}
});
$("#myform").validate({
rules:{
user:"required",
pwd:"required",
repwd:{
required:true,
equalTo:"#pwd",
},
mail:{
required:true,
email:true
},
phone:{
required:true,
checkPhone:true
}
},
messages:{
user:"请输入你的用户名",
pwd:"请输入你的密码",
repwd:{
required:"请输入你的密码",
equalTo:"两次密码不一致"
},
mail:{
required:"请输入你的Email",
email:"请输入正确的Email"
},
phone:"请输入正确的手机号 "
},
});
</script>
</body>
</html>

复制代码

效果：

点击提交按钮：

[代码片段] jquery - 插件

[代码片段] jquery - 插件

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫