使用jQuery validate进行数据校验

最新推荐文章于 2022-08-08 17:45:54 发布

北眼BeiYan

最新推荐文章于 2022-08-08 17:45:54 发布

阅读量632

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_37918553/article/details/103891846

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

校验规则

用户只能包含字母和数字
密码必须包含大小写字母和数字
密码长度不能小于 5 个字母

代码实现

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.19.1/localization/messages_zh.min.js"></script>
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<script>
    $.validator.setDefaults({
        submitHandler: function () {
            alert("提交!");
            debug: true;
        }
    });

    $().ready(function () {

        jQuery.validator.addMethod("isMobilePhone", function (value, element) {
            var licenceRegNum =
                /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|4|5|6|7|8|9])\d{8}/;
            var flag = false;
            if (licenceRegNum.test(value)) {
                flag = true;
            }
            return this.optional(element) || flag;
        }, "请输入正确的手机号");

        jQuery.validator.addMethod("isUserName", function (value, element) {
            var licenceRegNum = /^[\w]+)/;
            var flag = false;
            if (licenceRegNum.test(value)) {
                flag = true;
            }
            return this.optional(element) || flag;
        }, "用户只能包含字母和数字");

        jQuery.validator.addMethod("isPassword", function (value, element) {
            var licenceRegNum = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}/;
            var flag = false;
            if (licenceRegNum.test(value)) {
                flag = true;
            }
            return this.optional(element) || flag;
        }, "密码必须包含大小写字母和数字");

        // 在键盘按下并释放及提交后验证提交表单
        $("#signupForm").validate({
            rules: {
                username: {
                    required: true,
                    isUserName: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5,
                    isPassword: true
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                mobile_phone: {
                    required: true,
                    isMobilePhone: true
                }
            },
            messages: {
                username: {
                    required: "请输入用户名",
                    isUserName: "用户名只能包含字母和数字",
                    minlength: "用户名必需由两个字母组成"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母",
                    isPassword: "密码必须包含大小写字母和数字"
                },
                confirm_password: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母",
                    equalTo: "两次密码输入不一致"
                },
                email: "请输入一个正确的邮箱",
                mobile_phone: {
                    required: "请输入手机号",
                    isMobilePhone: "请输入正确的手机号"
                }

            }
        })
    });
</script>

<body>
    <div class="container-fluid" style="width: 80vw;margin: 10vh 20vw;">
        <div class="row-fluid">
            <div class="span12">
                <form id="signupForm" class="form-horizontal" method="get" action="">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirm_password" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                placeholder="确认密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="email" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="mobile_phone" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="mobile_phone" name="mobile_phone"
                                placeholder="手机号">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>