第一百八十四节,jQuery-UI,验证注册表单
jQuery-UI,验证注册表单
html
<form id="reg" action="123.html" title="会员注册">
<ol class="reg_error"></ol>
<p>
<label for="user">帐号:</label>
<input type="text" name="user" class="text" id="user"/>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码:</label>
<input type="text" name="pass" class="text" id="pass"/>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱:</label>
<input type="text" name="email" class="text" id="email"/>
<span class="star">*</span>
</p>
<p>
<label>性别:</label>
<input type="radio" name="sex" id="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日:</label>
<input type="text" name="date" readonly="readonly" class="text" id="date"/>
</p>
</form>
css
/*注册框*/
#reg {
padding: 15px;
} #reg p {
margin: 10px 0;
padding:;
} #reg p label {
font-size: 14px;
/*color: #666;*/
} #reg p .star {
color: red;
} #reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
height: 25px;
width: 200px;
text-indent: 5px;
color: #666;
}
#reg .reg_error{
color: #ff171f;
padding:;
margin:0 0 0 20px;
}
#reg .succ{
display:inline-block;
width:20px;
background:url(../img/reg_succ.png) no-repeat;
} /*ui提示信息*/
.ui-tooltip{
color: #ff1c24;
} .su{
width: 50px;
height: 20px;
background-color: #2cff24;
}
js
//注册框
$('#reg_a').on('click',function () { //将注册框,执行对话框方法
$('#reg').dialog({
autoOpen : true,
modal : true,
resizable : false,
width : 320,
height : 360,
buttons : {
'提交' : function () {
$(this).submit(); //执行提交方法
}
},
closeText : '关闭对话框'
}).buttonset().validate({ //验证表单
submitHandler: function (form) { //全部验证成功准备提交
alert('验证完成,准备提交!');
},
highlight: function (element, errorClass) { //如果出错,错误框边框改变颜色
$(element).css('border', '1px solid #630');
},
unhighlight: function (element, errorClass) { //如果正确取消边框改变颜色
$(element).css('border', '1px solid #ccc');
$(element).parent().find('span').html(' ').addClass('succ'); //显示正确图片
},
showErrors: function (errorMap, errorList) { //获取出错句柄
var errors = this.numberOfInvalids();
if (errors > 0) { //判断出错句柄个数来改变对话框的高度
$('#reg').dialog('option', 'height', errors * 20 + 340);
} else {
$('#reg').dialog('option', 'height', 360);
}
this.defaultShowErrors();
},
errorLabelContainer: 'ol.reg_error', //有错误时,将所有表单错误信息统一放到class为ol.reg_error的元素里
wrapper: 'li', //将每个错误信息放入一个li标签
rules : {
user : {
required:true,
rangelength:[2,10]
},
pass:{
required:true,
rangelength:[6,20]
},
email:{
required:true,
email:true
}
},
messages : {
user : {
required:'用户名不能为空!',
rangelength:jQuery.format('用户名不得小于{0}位,大于{1}位')
},
pass:{
required:'密码不能为空',
rangelength:jQuery.format('密码不得小于{0}位,大于{1}位')
},
email:{
required:'邮箱不能为空',
email:'请输入正确的邮箱格式'
}
}
}); //邮箱执行自动补全
$('#email').autocomplete({
autoFocus: true,
delay: 0,
source: function (request, response) {
var hosts = ['qq.com', '163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始
term = request.term, //获取输入值
ix = term.indexOf('@'), //@
name = term, //用户名
host = '', //域名
result = []; //结果
//结果第一条是自己输入
result.push(term);
if (ix > -1) { //如果有@的时候
name = term.slice(0, ix); //得到用户名
host = term.slice(ix + 1); //得到域名
}
if (name) {
//得到找到的域名
var findedHosts = (host ? $.grep(hosts, function (value, index) {
return value.indexOf(host) > -1;
}) : hosts),
//最终列表的邮箱
findedResults = $.map(findedHosts, function (value, index) {
return name + '@' + value;
});
//增加一个自我输入
result = result.concat(findedResults);
}
response(result);
}
}); //将生日执行日历ui
$('#date').datepicker({
showOtherMonths:true,
changeYear:true,
changeMonth:true,
yearSuffix:''
});
});
第一百八十四节,jQuery-UI,验证注册表单的更多相关文章
- 第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册
第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百八十八节,jQuery,选项卡 UI
jQueryUI,选项卡 UI 学习要点: 1.使用 tabs 2.修改 tabs 样式 3.tabs()方法的属性 4.tabs()方法的事件 5.tabs 中使用 on 选项卡(tab),是一种能 ...
- 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- 第一百七十四节,jQuery,Ajax进阶
jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...
- 第一百八十五节,jQuery,Ajax 表单插件
jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...
- 第一百八十九节,jQueryUI,折叠菜单 UI
jQueryUI,折叠菜单 UI 学习要点: 1.使用 accordion 2.修改 accordion 样式 3.accordion()方法的属性 4.accordion()方法的事件 5.acco ...
- 第一百六十四节,jQuery,常规选择器
jQuery,常规选择器 学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元 素的标签名.属性名. ...
- 第一百二十四节,JavaScriptCookie与存储
JavaScriptCookie与存储 学习要点: 1.cookie 2.cookie局限性 3.其他存储 随着Web越来越复杂,开发者急切的需要能够本地化存储的脚本功能.这个时候,第一个出现的方案: ...
随机推荐
- libcurl库的使用(通过libcurl库下载url图像) 【转】
http://www.linuxidc.com/Linux/2015-09/123609.htm?utm_source=tuicool&utm_medium=referral libcurl库 ...
- 小心!Ubuntu14.04 升级到16.04 的几个坑
收录待用,修改转载已取得腾讯云授权 昨天趁着周末把服务器升级了一把,遇到的坑可不少: sudo apt update sudo apt dist-upgrade 坑1:升级失败后,改用下面命令: su ...
- Java LinkedList的模拟实现
双向链表也叫双链表,是链表的一种,它的每个数据结点中都有两个指针,分别指向直接后继和直接前驱.所以,从双向链表中的任意一个结点开始,都可以很方便地访问它的前驱结点和后继结点.查询即从第一个节点,不断指 ...
- Nehe OpenGL lesson 8
lesson8 Blending: http://nehe.gamedev.net/tutorial/lessons_06__10/17010/ (也许须要特殊手段訪问) There was a re ...
- Charles 抓HTTPS包报以下错误:
1.You may need to configure your browser or application to trust the Charles Root Certificate. See S ...
- Docker使用国内镜像
vim /lib/systemd/system/docker.service ExecStart=/usr/bin/dockerd -H fd:// --registry-mirror=https:/ ...
- unity web项目发布服务器Data file is corrupt (not a Unity W
楼上问题需要在iis 中配置MIME 加一个 .unity3d MIME类型:application/octet-stream http://www.cnblogs.com/123ing/p/3913 ...
- ScrollView嵌套ListView冲突问题的最优解决方式
项目做多了之后.会发现事实上ScrollView嵌套ListVew或者GridView等非经常常使用,可是你也会发现各种奇怪问题产生.依据个人经验如今列出常见问题以及代码最少最简单的解决方法. 问题一 ...
- 基于tornado实现web camera
基于tornado实现web camera 近期在学习python.找了一个框架学习,我选择的是tornado.由于其不仅仅是一个web开发框架,其还是一个server,异步事件库,一举多得. 我一直 ...
- linux 实时显示文件的内容
1. watch -n 1 aa.txt #每个1秒显示aa.txt的内容 2. tail -f ***.log Linux shell中有一个tail命令,常用来显示一个文件的最后n行文档内容 但 ...