jQuery Validate表单中文正则验证+手机号正则验证

最新推荐文章于 2024-07-21 03:04:09 发布
颜夕啊
最新推荐文章于 2024-07-21 03:04:09 发布
阅读量697
点赞数 3
分类专栏： jquery validate
本文链接：https://blog.csdn.net/weixin_49490052/article/details/115495035
版权
jquery validate 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
话不多说先上图
在这里插入图片描述
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery validation 插件 - ThemeRolldered 实例</title>
    <link rel="stylesheet" media="screen" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">
    <style>
        body {
            font-size: 62.5%;
        }
        label {
            display: inline-block;
            width: 100px;
        }
        legend {
            padding: 0.5em;
        }
        fieldset fieldset label {
            display: block;
        }
        #commentForm {
            width: 500px;
        }
        #commentForm label {
            width: 250px;
        }
        #commentForm label.error, #commentForm button.submit {
            margin-left: 253px;
        }
        #signupForm {
            width: 670px;
        }
        #signupForm label.error {
            margin-left: 10px;
            width: auto;
            display: inline;
        }
        #newsletter_topics label.error {
            display: none;
            margin-left: 103px;
        }
    </style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
    <fieldset class="ui-widget ui-widget-content ui-corner-all">
        <legend class="ui-widget ui-widget-header ui-corner-all">验证一个完整的表单</legend>
        <p>
            <label for="firstname">名字</label>
            <input id="firstname" name="firstname" type="text">
        </p>
        <p>
            <label for="lastname">姓氏</label>
            <input id="lastname" name="lastname" type="text">
        </p>
        <p>
            <label for="username">用户名</label>
            <input id="username" name="username" type="text">
        </p>
        <p>
            <label for="tel">手机号</label>
            <input id="tel" name="tel" type="text">
        </p>
        <p>
            <label for="password">密码</label>
            <input id="password" name="password" type="password">
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" type="email">
        </p>
        <p>
            <label for="agree">请同意我们的条款</label>
            <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
            <label for="newsletter">我希望收到简讯</label>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics" class="ui-widget-content ui-corner-all">
            <legend class="ui-widget-header ui-corner-all">主题（至少选择两个）- 注：当未选择简讯时隐藏该项，但此处为了演示所以可见</legend>
            <label for="topic_marketflash">
                <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">
                Marketflash
            </label>
            <label for="topic_fuzz">
                <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">
                Latest fuzz
            </label>
            <label for="topic_digester">
                <input type="checkbox" id="topic_digester" value="digester" name="topic">
                Mailing list digester
            </label>
            <label for="topic" class="error">请选择至少两个您感兴趣的主题。</label>
        </fieldset>
        <p>
            <button class="submit" type="submit">提交</button>
        </p>
    </fieldset>
</form>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script>
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        },
        showErrors: function(map, list) {
            // there's probably a way to simplify this
            var focussed = document.activeElement;
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("close", {
                    currentTarget: focussed
                }, true)
            }
            this.currentElements.removeAttr("title").removeClass("ui-state-highlight");
            $.each(list, function(index, error) {
                $(error.element).attr("title", error.message).addClass("ui-state-highlight");
            });
            if (focussed && $(focussed).is("input, textarea")) {
                $(this.currentForm).tooltip("open", {
                    target: focussed
                });
            }
        }
    });

    (function() {
        // use custom tooltip; disable animations for now to work around lack of refresh method on tooltip
        $("#commentForm, #signupForm").tooltip({
            show: false,
            hide: false
        });

        // validate the comment form when it is submitted
        $("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                tel:{required:true,tel:true},
                username: {
                    required: true,
                    minlength: 2,
                    username:true

                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "请输入您的名字",
                lastname: "请输入您的姓氏",
                required:"请输入手机号",
                username: {
                    required: "请输入一个用户名",
                    minlength: "您的用户名必须包含至少 2 个字符"
                },
                password: {
                    required: "请提供一个密码",
                    minlength: "您的密码必须包含至少 5 个字符"
                },
                confirm_password: {
                    required: "请提供一个密码",
                    minlength: "您的密码必须包含至少 5 个字符",
                    equalTo: "请输入与上面相同的密码"
                },
                email: "请输入一个有效的电子邮件地址",
                agree: "请接受我们的条款"
            },

        });
        //手机号正则验证
        jQuery.validator.addMethod("tel", function(value, element) {
            var length = value.length;
            var mobile =  /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");

        // 用户名中文验证
        jQuery.validator.addMethod("username", function(value, element) {
            var username = /^[\u4e00-\u9fa5]+$/;
            return this.optional(element) || (username.test(value));
        }, "只能输入中文");

        // propose username by combining first- and lastname
        // focus点击输入框获取焦点
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }

        });

        //code to hide topic selection, disable for demo
        var newsletter = $("#newsletter");
        // newsletter topics are optional, hide at first
        var inital = newsletter.is(":checked");
        var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
        var topicInputs = topics.find("input").attr("disabled", !inital);
        // show when newsletter is checked
        newsletter.click(function() {
            topics[this.checked ? "removeClass" : "addClass"]("gray");
            topicInputs.attr("disabled", !this.checked);
        });

        $("#signupForm input:not(:submit)").addClass("ui-widget-content");

        $(":submit").button();
    })();
</script>
</body>
</html>