[封装插件]Jquery制作完整表单验证示例

最新推荐文章于 2023-08-17 17:46:35 发布

Byte_Dance

最新推荐文章于 2023-08-17 17:46:35 发布

阅读量757

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery表单验证</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

    <!--创建表单验证步骤 :-->
    <!--
        1:先给表单元素设置blur(获取焦点事件)判断各个输入框内的值是否匹配
        2:当表单提交时可以触发所有表单的blur(获取焦点事件)
        3:把所有的表单元素进行综合判断看是否有问题
    -->

    <!--样式-->
    <style>
        span{
            color:red;
            font-size: 14px;
            display: none;
        }
        .wrap{
            width:100%;
            height:100%;
        }
        #divid{
            width:310px;
            height: 400px;
            padding-top:100px;
            margin:0 auto;
        }
    </style>
</head>
<body>
<!--在method上,get值是显示表单内容,post值是不显示表单内容-->
<div class="wrap">
    <div id="divid">
        <form action="reg.php" method="get">
            <p>用户名:</p>
            <p>
                <input type="text" name="username" class="auth">
                <span class="error">用户名至少6位!</span>
            </p>

            <p>密码:</p>
            <p>
                <input type="password" name="password" class="auth">
                <span class="error">密码至少8位!</span>
            </p>

            <p>确认密码:</p>
            <p>
                <input type="password" name="repassword" class="auth">
                <span class="error">两次密码必须一致!</span>
            </p>

            <p>邮箱:</p>
            <p>
                <input type="text" name="email" class="auth">
                <span class="error">邮箱格式不正确!</span>
            </p>

            <p>手机号码:</p>
            <p>
                <!--注意手机号码位数要限制在11位-->
                <input type="text" name="phone" class="auth" maxlength="11">
                <span class="error">手机号码不正确!</span>
            </p>

            <p><input type="submit" value="提交" ></p>
        </form>
    </div>
</div>


<script>
    //匹配用户名:
    $("input[name=username]").blur(
            function(){
                //获取输入内容的长度 this表示获取元素的DOM写法
                var val= this.value;
                //再判断这个内容的长度是否小于限定范围
                if(val.length<2){
                    //给Jquery对象加一个属性,不影响元素本身,用于判断是否都已经输入正确
                    $(this).data({"s":0});
                    //如果小于,则将这个对象($(this)表示获取元素的Jquery写法)的下一个紧跟元素调用show()方法显示出来
                    $(this).next().show();
                }else{
                    //给元素用Jquery加一个属性,不影响标签本身
                    $(this).data({"s": 1});
                    //如果条件不满足,则调用方法还是将下一个元素调用hide()方法隐藏
                    $(this).next().hide();
                }
            }
    );
    //匹配密码:
    $("input[name=password]").blur(
            function(){
                var val= this.value;
                if(val.length<8){
                    $(this).data({"s":0});
                    $(this).next().show();
                }else{
                    $(this).data({"s":1});
                    $(this).next().hide();
                }
            }
    );
    //匹配二次密码:
    $("input[name=repassword]").blur(
            function(){
                //获取第一次输入密码
                var oneVal = $("input[name=password]").val();
                //获取第二次输入的密码
                var thisVal= this.value;
                //判断输入框是否为空
                if(thisVal.length == 0){
                    $(this).data({"s":0});
                    $(this).next().html("确认密码不能为空").show();
                    //判断输入的内容是否和第一次密码一致
                } else if(oneVal != thisVal){
                    $(this).data({"s":0});
                    $(this).next().html("两次密码必须一致").show();
                }else{
                    $(this).data({"s":1});
                    $(this).next().hide();

                }
            }
    );

    //匹配邮箱:
    $("input[name=email]").blur(
            function(){
                var val= this.value;
                if(!val.match(/^\w+@\w+\.+\w+$/i)){
                    $(this).data({"s":0});
                    $(this).next().show();
                }else{
                    $(this).data({"s":1});
                    $(this).next().hide();
                }
            }
    );

    //匹配手机:
    $("input[name=phone]").blur(
            function(){
                var val= this.value;
                if(!val.match(/^1[3|4|5|7|  8]+\d{9}/)){
                    $(this).data({"s":0});
                    $(this).next().show();
                }else{
                    $(this).data({"s":1});
                    $(this).next().hide();
                }
            }
    );

    //提交表单前综合验证
    $("form").submit(function(){
        //提交表单按钮每点击一次就获取所有的class类名为auth的输入框的焦点进行判断
        $(".auth").blur();
        //定义一个计数器,计算表单输入框的填写正确数量
        tot = 0;
        //对输入框进行遍历
        $(".auth").each(
                //然后把所有的计数器取出,再赋值给计数器
                function(){
                    tot += $(this).data("s");
                }
        );
        //判断输入框匹配数量是否正确
        if(tot!=5){
            //如果不正确就返回false阻止表单提交
            return false;
        }
        alert("表单提交成功!");
    });
</script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[封装插件]Jquery制作完整表单验证示例

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Jquery表单验证&lt;/title&gt; &lt;!--百度在线压缩地址--&gt; &lt;script sr
复制链接

扫一扫

专栏目录