欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

H5随笔(四)

程序员文章站 2022-07-05 20:39:33
...

JQ表单验证代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .outer{
            width: 750px;
            margin: 0px auto;
        }
        .outer>div{
            width: 100%;
            margin: 0px auto;
            border:1px solid black;
            border-radius:5px;
        }
        .form_all>div{
            margin-top: 15px;
            height: 25px;
            line-height: 25px;

            width: 100%;
        }
        .form_all>div>label{
            display: inline-block;
            width: 150px;
        }
        .form_all>div>div{
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding-left: 5px;
            padding-right: 5px;
            margin-left: 20px;
            /*display: none;*/
        }

        .subButton{
            margin-left: 100px;
            display: block;
            margin-top: 20px;
            margin-bottom: 20px;
            background: url(img/button.gif) no-repeat;
            background-size: 100%;
            height: 55px;
            width: 150px;
        }

        div label.error{
            color: red;
            width: 300px;
            display: inline-block;
        }
        div label.checked{
            color: green;
            width: 300px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="outer">
        <img src="img/register_logo.gif" />
        <div>
            <form class="form_all" >
                <div>
                    <label>通行证用户名:</label><input type="text" id="textName" name="textName"/>
                </div>
                <div>
                    <label>登录密码:</label><input type="text" id="textPassword" name="textPassword"/>
                </div>
                <div>
                    <label>重复登录密码:</label><input type="text" id="textConfirm" name="textConfirm"/>

                </div>
                <div>
                    <label>性别:</label><input type="radio" name="sex"/><a></a><input type="radio" name="sex"/><a></a>
                </div>
                <div id="divTrueName">
                    <label>真实姓名:</label><input type="text" name="realName"/>
                </div>
                <div>
                    <label>昵称:</label><input type="text" id="textCaname" name="textCaname"/>

                </div>
                <div>
                    <label>关联手机号:</label><input type="text" id="textTel" name="textTel"/>

                </div>
                <div>
                    <label>保密邮箱:</label><input type="text" id="textEmail" name="textEmail"/>

                </div>
                <button class="subButton">

                </button>

            </form>
        </div>
    </div>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/jquery.validate.js"></script>
    <script>
        $(function (e) {
            $(document).ready(function (e) {
                $('.form_all').validate({
                    rules:{
                        textName:{
                            required:true,
                            email:true
                        },
                        textPassword:{
                            required:true,
                            checkPassword:true
                        },
                        textConfirm:{
                            required:true,
                            equalTo:"#textPassword"
                        },
                        sex:{
                            required:true
                        },
                        textCaname:{
                            required:true
                        },
                        textTel:{
                            required:true
                        },
                        textEmail:{
                            required:true
                        }
                    },
                    messages:{
                        textName:{
                            required:"通行证用户名不能为空",
                            email:"请输入正确的格式"
                        },
                        textPassword:{
                            required:"密码不能为空",

                        },
                        textConfirm:{
                            required:"确认密码不能为空",
                            equalTo:"两次密码不一致"
                        },
                        sex:{
                            required:"请选择您的性别"
                        },
                        textCaname:{
                            required:"昵称不能为空,请输入昵称"
                        },
                        textTel:{
                            required:"关联手机号不能为空,请输入关联手机号码"
                        },
                        textEmail:{
                            required:"保密邮箱不能为空,请输入密保邮箱"
                        }
                    },
                    errorPlacement:function(error,element){
                        error.appendTo(element.parent());
                        let img=$('<img src="img/li_err.gif"/>')
                        error.before(img)
                    },
                    success:function (error, element) {
                        if(element.name==='textName'){
                            error.html("").addClass("checked");
                            error.text("通行证用户名输入正确");

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)

                        }
                        if(element.name==='textPassword'){
                            error.html("").addClass("checked");
                            error.text("密码输入正确")

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)
                        }
                        if(element.name==='textConfirm'){
                            error.html("").addClass("checked");
                            error.text("两次密码一致")

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)
                        }
                        if(element.name==='textCaname'){
                            error.html("").addClass("checked");
                            error.text("昵称输入正确")

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)
                        }
                        if(element.name==='textTel'){
                            error.html("").addClass("checked");
                            error.text("手机号输入正确")

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)
                        }
                        if(element.name==='textEmail'){
                            error.html("").addClass("checked");
                            error.text("邮箱正确")

                            let img=$('<img src="img/li_ok.gif"/>')
                            error.before(img)
                        }
                    }

                    // success:function (label) {
                    //     label.html("").addClass("checked");
                    //     label.text("成功")
                    // }
                })
            })


            jQuery.validator.addMethod("checkPassword", function(value, element) {
                var pattern = /^\d{6,12}$/;
                return this.optional(element) || (pattern.test(value));
            }, "密码长度为6-16");

        })
    </script>
</body>
</html>

H5随笔(四)

解决方法

success:function (error, element) {
     if(element.name==='textName'){
         error.html("").addClass("checked");
         error.text("通行证用户名输入正确");
         let img=$('<img src="img/li_ok.gif"/>')
         if(error.parent().find('img')!=null){
             error.parent().find('img').remove()
             console.log(error.parent().find("img"))
         }error.before(img)

     }

H5随笔(四)

相关标签: H5