【JAVAWEB学习笔记】06
来源:互联网 发布:pivot table选出数据 编辑:程序博客网 时间:2024/06/11 11:48
[h1]注意DOM无法使用JQ的方法 所以要进行$()来转换
五、使用JQ完成下拉列表左右选择
1.需求分析
见图片文字部分内容。
2.分析
第一步:确定事件(鼠标单击事件click)
第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧select定义了一个id=left]
第三步:将获取到的option添加到右侧的下拉列表中去。(append方法的使用)
3.代码实现
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
/*1.选中单击去右边*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>
六、使用JQ完成表单校验
1.需求分析
使用插件进行校验。
2.技术分析
这里使用validation插件完成对表单数据的校验
一款优秀的表单验证插件——validation插件
特点:
l 内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则
l 自定义验证规则:可以很方便的自定义验证规则
l 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
l 实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。
下载:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
快速入门:
第一步:引入jquery库和validation插件
案例:
<script type="text/javascript" src="../../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../../js/messages_zh.js" ></script>
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:2
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
digits:true,
minlength:6,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于2个字符!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!"
},
repassword:{
required:"确认密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!",
equalTo:"两次密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
minlength:"姓名不得少于2个字符!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
})
</script>
- 【JAVAWEB学习笔记】06
- JavaWeb学习笔记06-xml
- javaweb学习笔记
- 学习javaweb的笔记
- javaweb学习笔记
- JavaWeb学习笔记1
- javaweb学习笔记
- javaWeb学习笔记1
- javaWeb学习笔记2
- javaWeb学习笔记3
- JavaWeb学习笔记:Tomcat
- JavaWeb学习笔记:Servlet
- javaweb学习笔记
- javaweb学习笔记_day1
- JavaWeb学习笔记
- JAVAWeb开发学习笔记
- JavaWeb学习笔记
- javaweb 学习笔记
- PHP学习路线图
- 本地编译Hadoop2.8.0源码总结和问题解决(转自:http://blog.csdn.net/young_kim1/article/details/50324345)
- 【JAVAWEB学习笔记】07
- java 线程与进程 线程的实现 线程状态
- 用ffmpeg进行图像格式转换
- 【JAVAWEB学习笔记】06
- 轻轻松松装个win7系统
- spring boot+maven+mybatis+IDE+git项目搭建
- 【JAVAWEB学习笔记】05
- 【JAVAWEB学习笔记】04
- 【JAVAWEB学习笔记】03
- Kotlin学习总结文档
- 【JAVAWEB学习笔记】02
- ARP协议,同一网段,不同网段的详细通信流程