第一百八十四节,jQuery-UI,验证注册表单
2023-09-14 08:58:24 时间
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: 0; } #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:0; 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分页插件(jquery.page.js)的使用
- Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路
- JS原生方法实现jQuery的ready()
- jquery 更换皮肤
- jQuery 2.0.3 源码分析 事件体系结构
- jQuery获取当前按钮的id
- jquery中animate({left:'-='+width})中的 '-='+是什么意思?
- 第一百八十八节,jQuery,选项卡 UI
- 第一百八十三节,jQuery-UI,知问前端--验证插件
- 第一百八十二节,jQuery-UI,知问前端--日历 UI
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
- jquery资源
- JQUERY中各个ajax函数
- jQuery 事件 - delegate() 方法
- Jquery-ui draggable
- iframe中的jquery ui modal dialog 覆盖父窗口
- JQuery模板插件-jquery.tmpl
- 基于jQuery UI Autocomplete的AngularJS 指令(directive)扩展
- 电子签章盖章之jQuery插件jquery.zsign
- Atiitt 前端技术点清单列表 attilax总结 v2 s11.docx 1. ui与前端系列 类库与api3 1.1. 概念性技术4 1.2. 运行环境4 1.3. Ui技术点4 1
- jquery 控制 select 选中
- jQuery UI 实例 - 定位(Position)
- jQuery UI 实例 - 切换 Class(Toggle Class)
- jQuery UI 实例 - 选择(Selectable)
- jQuery UI 如何使用部件库(Widget Factory)
- jQuery UI 小部件(Widget)方法调用
- jQuery UI 使用
- OpenLayers学习笔记3——使用jQuery UI美化界面设计
- 如何使用jquery - ui 的图标icons 及图标的相对位置 +jquerui是如何来显示图标的?
- jQuery.extend和jQuery.fn.extend的区别?
- 使用Jquery+EasyUI 进行框架项目开发案例解说之二---用户管理源代码分享
- jquery不包含某个类?
- jQuery DataTables 使用手册(精简版)
- Telerik ui kendo for jquery 2022源码版