form表单验证封装

最新推荐文章于 2023-10-30 21:25:17 发布

大理无名道路

最新推荐文章于 2023-10-30 21:25:17 发布

阅读量344

点赞数

分类专栏： web 文章标签： html javascript

本文链接：https://blog.csdn.net/qq_34228805/article/details/107983648

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link rel="stylesheet" href="index.css">

    <script src="../../jquery-3.3.1.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    
    <script src="./index.js"></script>

    <style>
      .tip-error{
        display:none;
        background-color:bisque;
      }
    </style>

</head>
<body>
  

      <form class="form-horizontal" style="width: 600px;margin: 40px auto;">
        <div class="form-group">
            <label class="col-sm-2 control-label">Email</label>
            <input type="text" class="col-sm-6 form-control1"  placeholder="email">
            <span class="tip-error col-sm-4">输入有误</span>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">手机号</label>
            <input type="text" class="col-sm-6 form-control2"  placeholder="手机号">
            <span class="tip-error col-sm-4">输入有误</span>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label">姓名</label>
            <input type="text" class="col-sm-6 form-control3"  placeholder="姓名">
            <span class="tip-error col-sm-4">输入有误</span>
        </div>

      </form>



</body>
</html>

js:

//next紧邻的下一个元素
//siblings('.class') 同级的兄弟元素  不传参数表示所有的同级

//正则表达式 ^开始 $结束 /^[\u4eoo-\u9fa5]{2,4}$/.test(str)  正则匹配

$(function(){

    $(".form-group input").on('focus',function(){
        $(this).siblings('.tip-error').hide();
    });

    //邮箱
    $(".form-group .form-control1").on('blur',function(){
        var value=$(this).val();
        var filte=/[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
        formEvent(value,$(this),filte,'邮箱不能为空','邮箱格式不正确')
    })



    //用户名var reg=/^[\u4e00-\u9fa5]{2,4}$/; 2-4个汉字
    $(".form-group .form-control3").on('blur',function(){
        var value=$(this).val();
        var filte=/^[\u4e00-\u9fa5]{2,4}$/;
        formEvent(value,$(this),filte,'用户名不能为空','用户名为2-4个汉字')
    })

    //手机号var reg=/^1[0-9]{10}/;

    $(".form-group .form-control2").on('blur',function(){
        var value=$(this).val();
        var filte=/^1[0-9]{10}/;
        formEvent(value,$(this),filte,'手机号不能为空','请输入正确的手机号')
    })


    function formEvent(value,cur,filte,str1,str2){
        if(value==""){
            cur.siblings('.tip-error').show().text(str1);
        }else if (!filte.test(value)) {
            cur.siblings('.tip-error').show().text(str2);
        }else{
            cur.siblings('.tip-error').hide();
        }

    }


})

大理无名道路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form表单验证封装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=...
复制链接

扫一扫