您的位置:首页 > Web前端 > JQuery

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

2020-02-03 03:14 1036 查看

目录

  • CSS
  • JS
  • CSS --- 提示框震动效果
  • 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);
    }
    }
    • 点赞
    • 收藏
    • 分享
    • 文章举报
    诅咒你快乐 发布了2 篇原创文章 · 获赞 0 · 访问量 129 私信 关注
    内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: