【笔记1】登录注册表--表单验证篇 (jQuery)

最新推荐文章于 2022-03-30 00:57:41 发布

诅咒你快乐

最新推荐文章于 2022-03-30 00:57:41 发布

阅读量755

点赞数

分类专栏：前端笔记文章标签：表单验证

本文链接：https://blog.csdn.net/Yee_Jackson/article/details/100991170

版权

前端笔记专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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);
	}
}