Accept Merge Request #24 : (sxw-dev -> dev)

Merge Request: 修改了ajax验证表单的js，添加注册页面email字段
Created By: @esp
Accepted By: @virusdefender
URL: https://coding.net/u/virusdefender/p/qduoj/git/merge/24

static/src/js/app/oj/account/register.js

@@ -2,6 +2,11 @@ require(["jquery", "bs_alert", "csrf", "validation"], function($, bs_alert, csrf
     $("#register-form")
             .formValidation({
             framework: "bootstrap",
+            icon: {
+                valid: 'glyphicon glyphicon-ok',
+                invalid: 'glyphicon glyphicon-remove',
+                validating: 'glyphicon glyphicon-refresh'
+            },
             fields: {
                 username: {
                     validators: {
@@ -13,8 +18,10 @@ require(["jquery", "bs_alert", "csrf", "validation"], function($, bs_alert, csrf
                             max: 30,
                             message: '用户名长度必须在3到30位之间'
                         },
-                        usernameCheck:{
+                        remote: {
-                            message: '用户名已存在'
+                            message: "用户名已存在",
+                            url: "/api/username_check/",
+                            field: 'username'
                         }
                     }
                 },
@@ -50,6 +57,21 @@ require(["jquery", "bs_alert", "csrf", "validation"], function($, bs_alert, csrf
                             message: "两次输入的密码必须一致"
                         }
                     }
+                },
+                email: {
+                    validators: {
+                        notEmpty: {
+                            message: "请填写电子邮箱邮箱地址"
+                        },
+                        emailAddress: {
+                            message: "请填写有效的邮箱地址"
+                        },
+                        remote: {
+                            message: "您已经注册过了",
+                            url: "/api/email_check/",
+                            field: 'email'
+                        }
+                    }
                 }
             }
         }
@@ -72,8 +94,6 @@ require(["jquery", "bs_alert", "csrf", "validation"], function($, bs_alert, csrf
                         bs_alert(data.data);
                     }
                 }
-
             })
         });
-
 });

static/src/js/config.js

@@ -27,8 +27,9 @@ var require = {
         "validator/date": "lib/formValidation/validator/date",
         "validator/integer": "lib/formValidation/validator/integer",
         "validator/between": "lib/formValidation/validator/between",
-        'validator/confirm':"lib/formValidation/validator/confirm",
+        "validator/confirm":"lib/formValidation/validator/confirm",
-        "validator/usernameCheck":"lib/formValidation/validator/usernameCheck",
+        "validator/remote":"lib/formValidation/validator/remote",
+        "validator/emailAddress":"lib/formValidation/validator/emailAddress",
         //富文本编辑器 不要直接使用，而是使用上面的editor
         simditor: "lib/simditor/simditor",
         "simple-module": "lib/simditor/module",

static/src/js/lib/formValidation/validator/remote.js

@@ -1,146 +1,46 @@
 /**
  * remote validator
- *
- * @link        http://formvalidation.io/validators/remote/
- * @author      https://twitter.com/nghuuphuoc
- * @copyright   (c) 2013 - 2015 Nguyen Huu Phuoc
- * @license     http://formvalidation.io/license/
  */
-
 (function(root, factory) {
 
     "use strict";
 
     // AMD module is defined
     if (typeof define === "function" && define.amd) {
-        define("validator/remote", ["jquery", "base"], factory);
+        define("validator/remote", ["jquery", "base", "csrf"], factory);
     } else {
         // planted over the root!
         factory(root.jQuery, root.FormValidation);
     }
-
+}(this, function ($, FormValidation, csrfHeader) {
-}(this, function ($, FormValidation) {
     FormValidation.I18n = $.extend(true, FormValidation.I18n || {}, {
         'en_US': {
             remote: {
-                'default': 'Please enter a valid value'
+                'default': ''
             }
         }
     });
-
     FormValidation.Validator.remote = {
-        html5Attributes: {
-            message: 'message',
-            name: 'name',
-            type: 'type',
-            url: 'url',
-            data: 'data',
-            delay: 'delay'
-        },
-
-        /**
-         * Destroy the timer when destroying the bootstrapValidator (using validator.destroy() method)
-         */
-        destroy: function(validator, $field, options) {
-            var ns    = validator.getNamespace(),
-                timer = $field.data(ns + '.remote.timer');
-            if (timer) {
-                clearTimeout(timer);
-                $field.removeData(ns + '.remote.timer');
-            }
-        },
-
-        /**
-         * Request a remote server to check the input value
-         *
-         * @param {FormValidation.Base} validator Plugin instance
-         * @param {jQuery} $field Field element
-         * @param {Object} options Can consist of the following keys:
-         * - url {String|Function}
-         * - type {String} [optional] Can be GET or POST (default)
-         * - data {Object|Function} [optional]: By default, it will take the value
-         *  {
-         *      <fieldName>: <fieldValue>
-         *  }
-         * - delay
-         * - name {String} [optional]: Override the field name for the request.
-         * - message: The invalid message
-         * - headers: Additional headers
-         * @returns {Deferred}
-         */
         validate: function(validator, $field, options) {
-            var ns    = validator.getNamespace(),
+            var dfd   = new $.Deferred(), ajaxData = {};
-                value = validator.getFieldValue($field, 'remote'),
+            ajaxData[options.field] = $field.val();
-                dfd   = new $.Deferred();
+            if ($field.val() === '')
-            if (value === '') {
+                return true;
-                dfd.resolve($field, 'remote', { valid: true });
+            var url     = options.url;
-                return dfd;
+            var xhr = $.ajax({
-            }
+                beforeSend: csrfHeader,
-
+                url: url,
-            var name    = $field.attr('data-' + ns + '-field'),
+                dataType: 'json',
-                data    = options.data || {},
+                data: ajaxData,
-                url     = options.url,
+                method: "post"
-                type    = options.type || 'GET',
+            });
-                headers = options.headers || {};
+            xhr.success(function(response) {
-
+                dfd.resolve($field, 'remote',{valid:!response.data, message:options.msg});
-            // Support dynamic data
+            })
-            if ('function' === typeof data) {
+            .error(function(response) {
-                data = data.call(this, validator);
+                dfd.resolve($field, 'remote', {valid: false});
-            }
+            });
-
+            return dfd;
-            // Parse string data from HTML5 attribute
-            if ('string' === typeof data) {
-                data = JSON.parse(data);
-            }
-
-            // Support dynamic url
-            if ('function' === typeof url) {
-                url = url.call(this, validator);
-            }
-
-            data[options.name || name] = value;
-            function runCallback() {
-                var xhr = $.ajax({
-                    type: type,
-                    headers: headers,
-                    url: url,
-                    dataType: 'json',
-                    data: data
-                });
-
-                xhr
-                    .success(function(response) {
-                        response.valid = response.valid === true || response.valid === 'true';
-                        dfd.resolve($field, 'remote', response);
-                    })
-                    .error(function(response) {
-                        dfd.resolve($field, 'remote', {
-                            valid: false
-                        });
-                    });
-
-                dfd.fail(function() {
-                    xhr.abort();
-                });
-
-                return dfd;
-            }
-            
-            if (options.delay) {
-                // Since the form might have multiple fields with the same name
-                // I have to attach the timer to the field element
-                if ($field.data(ns + '.remote.timer')) {
-                    clearTimeout($field.data(ns + '.remote.timer'));
-                }
-
-                $field.data(ns + '.remote.timer', setTimeout(runCallback, options.delay));
-                return dfd;
-            } else {
-                return runCallback();
-            }
         }
     };
-
-
-    return FormValidation.Validator.remote;
 }));

static/src/js/lib/formValidation/validator/remotex.js

@@ -0,0 +1,146 @@
+/**
+ * remote validator
+ *
+ * @link        http://formvalidation.io/validators/remote/
+ * @author      https://twitter.com/nghuuphuoc
+ * @copyright   (c) 2013 - 2015 Nguyen Huu Phuoc
+ * @license     http://formvalidation.io/license/
+ */
+
+(function(root, factory) {
+
+    "use strict";
+
+    // AMD module is defined
+    if (typeof define === "function" && define.amd) {
+        define("validator/remote", ["jquery", "base"], factory);
+    } else {
+        // planted over the root!
+        factory(root.jQuery, root.FormValidation);
+    }
+
+}(this, function ($, FormValidation) {
+    FormValidation.I18n = $.extend(true, FormValidation.I18n || {}, {
+        'en_US': {
+            remote: {
+                'default': 'Please enter a valid value'
+            }
+        }
+    });
+
+    FormValidation.Validator.remote = {
+        html5Attributes: {
+            message: 'message',
+            name: 'name',
+            type: 'type',
+            url: 'url',
+            data: 'data',
+            delay: 'delay'
+        },
+
+        /**
+         * Destroy the timer when destroying the bootstrapValidator (using validator.destroy() method)
+         */
+        destroy: function(validator, $field, options) {
+            var ns    = validator.getNamespace(),
+                timer = $field.data(ns + '.remote.timer');
+            if (timer) {
+                clearTimeout(timer);
+                $field.removeData(ns + '.remote.timer');
+            }
+        },
+
+        /**
+         * Request a remote server to check the input value
+         *
+         * @param {FormValidation.Base} validator Plugin instance
+         * @param {jQuery} $field Field element
+         * @param {Object} options Can consist of the following keys:
+         * - url {String|Function}
+         * - type {String} [optional] Can be GET or POST (default)
+         * - data {Object|Function} [optional]: By default, it will take the value
+         *  {
+         *      <fieldName>: <fieldValue>
+         *  }
+         * - delay
+         * - name {String} [optional]: Override the field name for the request.
+         * - message: The invalid message
+         * - headers: Additional headers
+         * @returns {Deferred}
+         */
+        validate: function(validator, $field, options) {
+            var ns    = validator.getNamespace(),
+                value = validator.getFieldValue($field, 'remote'),
+                dfd   = new $.Deferred();
+            if (value === '') {
+                dfd.resolve($field, 'remote', { valid: true });
+                return dfd;
+            }
+
+            var name    = $field.attr('data-' + ns + '-field'),
+                data    = options.data || {},
+                url     = options.url,
+                type    = options.type || 'GET',
+                headers = options.headers || {};
+
+            // Support dynamic data
+            if ('function' === typeof data) {
+                data = data.call(this, validator);
+            }
+
+            // Parse string data from HTML5 attribute
+            if ('string' === typeof data) {
+                data = JSON.parse(data);
+            }
+
+            // Support dynamic url
+            if ('function' === typeof url) {
+                url = url.call(this, validator);
+            }
+
+            data[options.name || name] = value;
+            function runCallback() {
+                var xhr = $.ajax({
+                    type: type,
+                    headers: headers,
+                    url: url,
+                    dataType: 'json',
+                    data: data
+                });
+
+                xhr
+                    .success(function(response) {
+                        response.valid = response.valid === true || response.valid === 'true';
+                        dfd.resolve($field, 'remote', response);
+                    })
+                    .error(function(response) {
+                        dfd.resolve($field, 'remote', {
+                            valid: false
+                        });
+                    });
+
+                dfd.fail(function() {
+                    xhr.abort();
+                });
+
+                return dfd;
+            }
+            
+            if (options.delay) {
+                // Since the form might have multiple fields with the same name
+                // I have to attach the timer to the field element
+                if ($field.data(ns + '.remote.timer')) {
+                    clearTimeout($field.data(ns + '.remote.timer'));
+                }
+
+                $field.data(ns + '.remote.timer', setTimeout(runCallback, options.delay));
+                return dfd;
+            } else {
+                return runCallback();
+            }
+        }
+    };
+
+
+    return FormValidation.Validator.remote;
+}));

static/src/js/lib/formValidation/validator/usernameCheck.js

@@ -1,37 +0,0 @@
-/**
- * usernameCheck validator
- */
-(function(root, factory) {
-
-    "use strict";
-
-    // AMD module is defined
-    if (typeof define === "function" && define.amd) {
-        define("validator/usernameCheck", ["jquery", "base", "csrf"], factory);
-    } else {
-        // planted over the root!
-        factory(root.jQuery, root.FormValidation);
-    }
-}(this, function ($, FormValidation, csrfHeader) {
-    FormValidation.I18n = $.extend(true, FormValidation.I18n || {}, {
-        'en_US': {
-            usernameCheck: {
-                'default': 'Please input the same value'
-            }
-        }
-    });
-    FormValidation.Validator.usernameCheck = {
-        validate: function(validator, $field, options) {
-                    if ($field.val() == '')
-                        return true;
-                    return !$.ajax({
-                        async: false,
-                        beforeSend: csrfHeader,
-                        url: "/api/username_check/",
-                        data: {username: $field.val()},
-                        dataType: "json",
-                        method: "post",
-                    }).responseJSON.data;
-        }
-    };
-}));

static/src/js/utils/validation.js

@@ -9,6 +9,7 @@ define("validation",
         'validator/integer',
         'validator/between',
         'validator/confirm',
-        'validator/usernameCheck'],
+        'validator/remote',
+        'validator/emailAddress'],
         function () {
     });

template/oj/account/register.html

@@ -14,6 +14,10 @@
                 <label for="real_name">真实姓名</label>
                 <input type="text" class="form-control input-lg" id="real_name" name="real_name" placeholder="真实姓名">
             </div>
+            <div class="form-group">
+                <label for="email">邮箱地址</label>
+                <input type="email" class="form-control input-lg" id="email" name="email" placeholder="邮箱地址">
+            </div>
             <div class="form-group">
                 <label for="password">密码</label>
                 <input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码">