requirejs+jquery表单验证

最新推荐文章于 2020-11-10 17:47:09 发布

我是全栈架构师

最新推荐文章于 2020-11-10 17:47:09 发布

阅读量568

点赞数

分类专栏： RequireJs JQuery 文章标签： jquery require-js

本文链接：https://blog.csdn.net/mxj588love/article/details/78783042

版权

RequireJs 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JQuery

2 篇文章 0 订阅

订阅专栏

requirejs的使用
jquery.validate.js的使用

1. userAdd.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <script src="../requirejs/require.js" data-main="main" type="text/javascript"></script>
    <style type="text/css">
        .error {
            font-size: 13px;
            color: red;
        }
    </style>
</head>
<body>
<div class="container" style="padding-top: 15px">
    <div class="panel panel-primary" style="width: 400px">
        <div class="panel-heading">
            <div class="panel-title"><h2>Add User</h2></div>
        </div>
        <div class="panel-body">
            <form role="form" class="form" id="userAddForm" onsubmit="return false">
                <div class="form-group">
                    <label class="">Name</label>
                    <input class="form-control" type="text" id="userName" name="userName" />
                </div>
                <div class="form-group">
                    <label class="">Email</label>
                    <input class="form-control" type="email" id="email" name="email" />
                </div>
                <div class="form-group">
                    <label>Address</label>
                    <!--在这里, 我们可以直接把验证写在html中,就像下面这一行; 也可以在validate脚本中编写-->
                    <input class="form-control" type="text" id="address" name="address" required minlength="5" maxlength="50" />
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" id="btnSubmit">Submit</button>
        </div>
    </div>
</div>
</body>
</html>

2. main.js

require.config({
    //baseUrl:'.',
    paths: {
        'myjquery': 'jquery-1.9.1.min',
        'myvalidate': 'jquery.validate',
        'mymessagescn': 'messages_cn',
        'mybootstrap':'../js/bootstrap.min'
    },
    //不是标准的AMD文件, 用shim
    shim: {
        //这个key要跟上面paths中定义的key一直
        'myvalidate': {
            //依赖项
            deps: ['myjquery'],
            exports: 'a'
        },
        'mymessagescn': {
            //注意这个位置,messages_cn这个插件是依赖两个的, 我之前只写了jquery, 页面报错;
            //所以依赖关系一样要搞清楚
            deps: ['myjquery','myvalidate'],
            exports: 'b'
        }
    }
});

require(['user'], function (user) {
    $('#btnSubmit').click(user.formSubmit);
});

2. user.js

define(['myjquery', 'myvalidate','mymessagescn'],function () {

    $("#userAddForm").validate({
        rules: {
            userName: {
                required: true,
                minlength: 3,
                maxlength: 20
            },

            email: {
                required: true,
                maxlength: 20
            }
        },

        submitHandler: function () {
            $.ajax({
                url: "",
                dataType: "json",
                async: true,
                type: "post",
                beforeSend: function () {
                    alert("beforeSend");
                    return false;
                },
                success: function (data, status) {
                    alert("success")
                },
                error: function () {
                    alert("error")
                }
            });

        }
    });

    var getForm = function () {
        return $("#userAddForm");
    }

    var submit = function () {
        getForm().submit();
    }

    return {
        formSubmit: submit
    };
});

3. 目录结构

jquery
jquery-1.9.1.min.js
jquery.validate.js
messages_cn.js
main.js
user.js
userAdd.html

我是全栈架构师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
requirejs+jquery表单验证

requirejs的使用jquery.validate.js的使用1. userAdd.html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="../css/b
复制链接

扫一扫