【笔记1】登录注册表--表单验证篇 (jQuery)
目录
HTML5
input
表单必不可少的就是输入框 <input>,其type属性有很多类型,最常用到的有text、password、email、button、submit等类型。
- text 就是最普通的文本输入框。
- password 是密码的输入,该属性可以隐藏输入的内容,效果如下。
- email 是邮箱地址的输入,浏览器会自己帮我们验证,效果如下。
- button 是普通的按钮
- sumbit 是提交按钮
CSS
多选择器:把多个选择器连接在一起,表示仅可以选择同时包含这些类名的元素(类名的顺序不限)。如果一个多类选择器包含类名列表中没有的类名,匹配就会失败。
- 如 .c-title .logo选择器,既包含c-title又包含logo类名的元素才会被选中。
a. 相对定位
position: relative;
- 所有元素开始时都会有一个初始位置,为其加上left、right、top、bottom属性后,就会在初始位置的基础上对元素进行移动。(四个移动方向与其值是相反的,如 left: -50px 才是向左移动50像素)
举例:
position: relative; right: -50px; //向右移动
b. 绝对定位
position: absolute;
- 绝对定位是相对于整个页面来移动,而不是相对于元素的初始位置来移动。同样移动方向也与其值相反。
相对定位与绝对定位的区别举例:
a.圆的初始位置
b.添加相对定位后
position: relative; top: -85px; right: -85px;
在初始位置的基础上向上且向右移动
c.添加绝对定位后
position: absolute; top: -85px; right: -85px;
相对整个页面向上且向右移动
c. 背景渐变色
linear-gradient(to left,red,blue);
- 参数1:起始位置
参数2:起始位置另一边的颜色
参数3:起始位置处的颜色
d. 图片背景
.c-login .loginForm input[type="password"]{ padding: 8px 0px 8px 30px; background-image: url("../img/login-password.png"); background-repeat: no-repeat; /*加上这句图片就不会重复啦*/ background-size: 18px; background-position: 5px 3px; }
给密码输入框前面加上一个小锁的图片,代码上,效果如下。
- 可以同时插入多张图片(在前面的图片会出现在上层)
background-image:url(‘URL1’), url(‘URL2’);
e. 清除浮动或隐藏超出部分
- 当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素中使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。
- 当父元素自身设置了height属性值,则在父元素中使用overflow: hidden可以使子元素超出父元素的那部分隐藏。
f. 文字/图片居中
text-align: center;
- 在父元素上设置,可让文字和图片都居中
<div class="c-title"> <div> <img src="img/login-alipay.png width="42" height="32"> </div> <p class="name">支付宝</p> <img src="img/login-alipay.png"> </div>
.c-title { /*父元素的子元素都居中*/ text-align: center;}
g. 插入内容
选择器 :before /*在前面插入内容*/ 选择器 :after /*在后面插入内容*/
<html> <head> <style> p :before{ content :"台词: "; background-color :yellow; color :red; font-weight: bold; } </style> </head> <body> <p>我是唐老鸭。</p> <p>我住在 Duckburg。</p> </body> </html>
- 该方法不仅可以插入文字,还可以插入图形,定义长度和宽度即可,此时content :" ";。
h. padding与margin
A. padding 是内边距,即内容和边框的距离。
- 后面跟两个参数: 第一个表示上下边距 第二个表示左右边距
- 后面跟四个参数:依次是上、右、下、左边距(顺时针方向)
举例:
注:输入框中文字的初始位置。
padding: 8px 0px 8px 30px;
注:添加内边距后,输入框中文字的位置移动了。padding就是输入框与输入框中文字之间的距离。左方向上是30px,右方向上是0px,则表示左边取到30px的距离后,剩下部分就是右边距。另外,按钮中的文字也可以这样处理。
B. margin 是外边距,即边框和边框之间的距离。
- 后面跟两个参数: 第一个是上下距离 第二个是左右距离
- 后面跟三个参数:第一个是上距离 第二个是右左距离 第三个是下距离
- 后面跟四个参数:依次是上、右、下、左边距(顺时针方向)
举例1:
margin: 0px auto 20px auto;
注:左右都是auto,自动计算距离,相当于在水平方向上居中,margin是输入框和表单外框之间的距离,还有输入框与输入框上下之间的距离。
举例2:
注:这是表单的初始位置
position: relative; margin: -100px auto 0px auto;
注:添加相对定位后,表单向上移动100px,且相对整个页面左右居中。margin是表单与整个页面之间的距离。
i. 阴影效果
box-shadow: 10px 10px 7px #fdd8ac;
- 第一个参数:水平距离 整数为右
第二个参数:垂直距离 整数为下
第三个参数:模糊程度
第四个参数:阴影颜色
注:添加阴影效果可以让你的表单有种悬浮的感觉~
j. 输入框与按钮同一行显示
display: inline;
- 在你需要放在同一行的元素后面都加上这句话,就可以在同一行显示啦。
JS
a. 使用jQuery
- jquery是js的一个框架,如果项目中用到jquery的话就需要引入jquery.min.js文件。如果引用最好在html中放在第一个引用,否则会出现问题。
(一般有$(" ")的,可能就是使用了jquery)
<script type="text/javascript" src="js/jquery.min.js"></script>
b. 表单验证代码
首先需要给表单的提交按钮绑定一个点击事件,才能触发后续验证。
<script type="text/javascript"> $('#regBtn').click(function(){ //等同于document.getElementById("regBtn") 给提交按钮绑定一个点击事件 if(!checkInputFunction($('#regBtn'))){ return false; } //下面书写验证成功后执行的内容 }); </script>
验证部分代码,包含表单的五项校验。
var checkInput = { /*正则表达式验证法 前三个是数组,长度为2*/ userName: [ //用户名校验 /^[a-zA-Z0-9_-]{4,20}$/, '用户名必须由4-20位的字母或数字组成' /*提示文字*/ ], phone: [ //手机号校验 /^1(3|4|5|6|7|8|9)\d{9}$/, '请输入正确的手机号' ], email: [ //邮箱校验 /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/, '请输入正确的邮箱' ], /*函数验证法*/ required: function(value) { //必填项校验 if (value == "" || value == null) { return "必填项不能为空"; //验证失败,返回提示文字 } else { return true; //验证成功,返回true(必写) } }, password: function(value) { //密码验证 var countNum = 0; //计算密码中数字的个数 var letter = /^[a-zA-Z]+$/; //取字母 var num = /[0-9]$/; //取数字 if (value.length < 8 || value.length > 16) { //总长度必须8-16 return "密码为8-16的数字和字母组合,至少有2个数字"; } for (i = 0; i < value.length; i++) { if (num.test(value.charAt(i))) { countNum++; //数字个数 } else if (!letter.test(value.charAt(i))) { //不能没有字母 return "密码为8-16的数字和字母组合,至少有2个数字"; } } if (countNum < 2) { //数字不能少于两个 return "密码为8-16的数字和字母组合,至少有2个数字"; } return true; //验证成功(必须写) } };
lay-verify
验证方法用到正则表达式验证法和函数验证法,在h5中需要添加lay-verify属性
lay-verify 属性可接受多个验证关键词,其格式如下:lay-verify = “验证A|验证B|验证C”,放在前面的关键词将会优先验证。
<form class="loginForm"> <input type="text" placeholder="请输入商户名称" class="userLogo" lay-verify="required|userName" /> <input type="text" placeholder="请输入手机号码" lay-verify="phone" /> <input type="text" placeholder="请输入验证密码" class="codeText" lay-verify="required" /> <input type="button" value="获取验证码" class="codeBtn"/> <input type="text" placeholder="请输入邮箱" class="userLogo" lay-verify="email"/> <input type="password" placeholder="请输入密码" lay-verify="required|password"/> <input type="password" placeholder="请输入确认密码" lay-verify="required|password"/> <input type="button" value="注册" id="regBtn" /> </form>
对用户输入的值进行检验
function checkInputFunction(el) { var i = 0; //当i=1时则验证失败,i=0验证通过 var inputDate = el.parents("form").find('input'); //获取form元素的父级 并查找所有input对象 var layDate = el.parents("form").find('[lay-verify]'); //获取form元素的父级 并查找所有包含lay-verify的对象 //遍历查找到的含有lay-verify对象的集合 $.each(layDate, function() { //each来遍历 var key = $(this).attr("lay-verify"); //attr返回lay-verify属性的值 var keys = key.split("|"); //用于把字符串分隔成字符串数组(lay-verify有多个值以|分隔) for (k in keys) { //k遍历数组keys var value = $(this).val(); //取到用户当前输入的值 if (checkInput[keys[k]] != null) { //[keys[k]]的值就是验证关键词 if (typeof checkInput[keys[k]] == "function") { //如果验证类型是函数验证 var keyFunction = checkInput[keys[k]]; //将函数赋给一个新的函数 var retValue = keyFunction(value); //retValue取得该值value在函数中的验证结果 if (retValue != true) { //验证失败 showTip.fall(retValue); //传入得到文字提示 $(this).focus(); //在该行获取焦点 i++; //验证标志改为1 return false; } } else if (typeof checkInput[keys[k]] == "object") { //如果验证类型是数组 if (!checkInput[keys[k]][0].test(value)) { //将值value放入数组第一项中验证 showTip.fall(checkInput[keys[k]][1]); //验证失败,传入数组第二项的文字提示 $(this).focus(); //在该行获取焦点 i++; //验证标志改为1 return false; } } } } }); if (i == 0) { //当i=1时则验证失败,i=0验证通过 return true; } else { return false; } }
- each 可以遍历数组
- attr 返回属性的值,格式 attr(“属性名”);
- split 将字符串分隔成字符串数组,存入keys中。 split("|"):遇见“|”就分隔。
- for(k in keys) 遍历数组的方法 k遍历数组keys
- $(this).val() 可以取到用户当前输入的值
- checkInput[keys[k]] k遍历数组keys;数组keys[k]的值是验证关键字:userName、phone、email、required、password;checkInput[keys[k]] 就是 checkInput [required]、checkInput [userName]等。
- showTip.fall(retValue) 和 showTip.fall(checkInput[keys[k]][1]) 传入的值都是验证后得到的文字提示
typeof
- typeof 用以获取一个变量或者表达式的类型,typeof一般只能返回如下几个结果:number,boolean,string,function(函数),object(NULL,数组,对象),undefined。
- typeof checkInput[keys[k]] 来判断 checkInput [keys[k]] 的类型
弹出失败提示框
//定时器 var timer = null; //弹出失败提示框 var showTip = { fall: function(value) { //验证失败的提示框 clearTimeout(timer); //清除定时器 $('[name="checkInputTip"]').remove(); //移除提示框 //设置提示框内容 var tip = '<div name="checkInputTip" class="checkInputFallTip">' + '<span>' + value + '</span>' + //value是文字提示 '</div>'; $('body').append(tip); //添加提示框 $('[name="checkInputTip"]').fadeIn(20, function() { //fadeIn实现淡入效果 $('[name="checkInputTip"]').addClass('checkInputTipFallHover'); //添加震动类 }); timer = setTimeout(cleanTip, 2000); //2秒后清除提示 } }; function cleanTip() { //清除提示 $('[name="checkInputTip"]').fadeOut(500, function() { //淡出提示框 $('[name="checkInputTip"]').remove(); //移除提示框 }); }
jQuery效果–fadeIn / fadeOut
- fadeIn( ) 方法使用淡入效果来显示被选元素;fadeOut( ) 方法使用淡出效果来隐藏被选元素。
- 语法 $(selector).fadeIn(speed,callback),speed是淡入的速度,单位为毫秒;callback是fadeIn函数执行完后,要执行的函数;两个参数都是可选。fadeOut()同理。
setTimeout / clearTimeout
- 定时函数,格式为setTimeout (method, time)。 含义是time毫秒后执行method方法。
- clearTimeout 函数可以取消setTimeout的操作。
CSS — 提示框震动效果
/*震动效果*/ .checkInputTipFallHover { animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; /*当元素背部朝向屏幕时隐藏*/ perspective: 1000px; /*透视值,值越小,透视效果越明显*/ } @keyframes shake { /*晃动的幅度*/ 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
- 点赞
- 收藏
- 分享
- 文章举报
- JQuery笔记(表单验证)五 errorcontainer-demo_3.html meta:string
- JQuery笔记(表单验证)
- jquery.validate 学习笔记(验证form表单工具)
- JQuery笔记(表单验证)六 errorcontainer-demo_4.html errorClass
- JQuery笔记(表单验证)七 errorcontainer-demo_5.html errorElement
- jquery.validate验证表单配合回调提交和h5.storage本地保存笔记
- JQuery笔记(表单验证)八 metadata-demo.html jquery.metadata.js
- jQuery学习笔记5 表单验证
- jQuery学习笔记-Validation表单验证插件
- 20151222jquery学习笔记--验证注册表单
- jQuery学习笔记——表单验证
- 【Web前端学习笔记】EasyUI、JQuery表单验证
- JQuery笔记(表单验证) 二
- JQuery笔记(表单验证)
- JQuery笔记(表单验证)四 errorcontainer-demo_2.html
- jQuery表单验证
- Jquery表单验证
- JQuery的自定义表单验证应用办法
- Validation 表单验证 插件 jQuery 验证 数字 日期 (一)
- 7.1.1: jQuery表单验证插件Validation简介