插件是以JQuery核心代码为基础,编写出符合一定规范的应用程序,并将程序进行打包,调用时,仅需要包含该打包后的JS文件即可
我们所介绍的以及常用的一些插件都可以在这里找到
http://archive.plugins.jquery.com/
http://plugins.jquery.com/
来看一些jQuery特效:
在线地址:http://www.jsfoot.com/jquery/
validate简介:
自带验证规则,包括必填,数字,url等
验证提示信息(就是验证失败时候的提示信息,要想显示中文需要插件支持)
多种事件触发,不仅可以在提交(单击submit类型的按钮)时,还可以在keyup,blur事件中触发验证
4.允许自定义验证规则
rules:声明验证规则,此为关键字,不能写错
username和email:控件的name属性的值
errorshow:表示错误处理,可以自定义名字
error:错误信息
element:错误元素
required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10
validate使用方法:
引入Jquery
引入jquery.validate.js
引入messages_cn.js
为表单定义一个id
为需要验证的控件定义name属性,并赋值,此插件使用的是控件的name属性,而非id
必须先引入Jquery,否则会报错"jQuery未定义"
引用js库:
<script src="Jquery1.7.js"></script><script src="jquery.validate.js"></script>
<script src="messages_cn.js"></script>
JQuery部分:
<script type="text/javascript">
$(function () {
$('#form1').validate({
rules: {
username: { required: true, minlength: 6 },//必填,必须输入最小字符串长度为6位的字符串。
email: { required: true, email: true },//必填,必须输入邮箱格式,即:123456@qq.com
myurl: { required: true, url: true },//必填,必须输入网址格式,即:http://www.baidu.com
myage: { required: true, range: [1, 150] },//必填,必须输入0-150之间的数字
mydate: { required: true, dateISO: true },//必填,必须输入日期格式,即:yyyy-mm-dd或yyyy/mm/dd。
myphone: { required: true, digits: true, maxlength: 11 },//必填,必须输入整数,最大字符串长度为11位。
mypsw: { required: true, rangelength: [5, 10] },//必填,必须输入字符串长度为5到10位字符(汉字算一个字符)。
samepsw: { required:
true, rangelength: [5, 10], equalTo: '#mypsw' },//必填,必须输入字符串长度为5到10位字符(汉字算一个字符),必须与id为#mypsw元素中字符串相同。
mybloodpre: { required: true, number: true }//必填,必须输入数字(负数,小数)
},
cuowu: function (error,element)
{
error.appendTo(element.siblings('span'))
}
与上面cuowu: function功能相同,就是将错误信息写入到td中span标签中
//errorshow: function (error, element) {
//error.appendTo(element.siblings('span'));
//}
})
})
</script>
HTML部分:
<body>
<form id="form1" >
<table>
<tr>
<td>用户名:</td>
<td>
<input name="username" type="text" /><span>*</span></td>
</tr>
<tr>
<td>密 码:</td>
<td>
<input id="mypsw" name="mypsw" type="text" /><span>*</span></td>
</tr>
<tr>
<td>重复密码:</td>
<td>
<input name="samepsw" type="text" /><span>*</span></td>
</tr>
<tr>
<td>邮 箱:</td>
<td>
<input name="email" type="text" /><span>*</span></td>
</tr>
<tr>
<td>个人主页:</td>
<td>
<input name="myurl" type="text" /><span>*</span></td>
</tr>
<tr>
<td>年 龄:</td>
<td>
<input name="myage" type="text" /><span>*</span></td>
</tr>
<tr>
<td>生 日:</td>
<td>
<input name="mydate" type="text" /><span>*</span></td>
</tr>
<tr>
<td>手 机:</td>
<td>
<input name="myphone" type="text" /><span>*</span></td>
</tr>
<tr>
<td>血 压:</td>
<td>
<input name="mybloodpre" type="text" /><span>*</span></td>
</tr>
</table>
</form>
</body>
全部输入错误效果:
注意:可以更改引入的jquery.validate.js库中的错误提示信息,完善提示效果。
全部输入正确效果:
注意:合法日期验证只是验证格式正确,内容错误无法识别,但是可以更改引入的jquery.validate.js库中的正则表达式完善对日期内容的验证,可自行更改。