xuyue/OnlineJudge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Merge Request: 修改了ajax验证表单的js，添加注册页面email字段
Created By: @esp
Accepted By: @virusdefender
URL: https://coding.net/u/virusdefender/p/qduoj/git/merge/24
This commit is contained in:
virusdefender
2015-08-05 20:09:26 +08:00
parent 4793d660ea cbb86d72f1
commit b1c8607820
7 changed files with 201 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/src/js/app/oj/account/register.js
View File

@@ -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:{
message: '用户名已存在'
remote: {
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);
}
}
})
});
});

5
static/src/js/config.js
View File

@@ -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/usernameCheck":"lib/formValidation/validator/usernameCheck",
"validator/confirm":"lib/formValidation/validator/confirm",
"validator/remote":"lib/formValidation/validator/remote",
"validator/emailAddress":"lib/formValidation/validator/emailAddress",
//富文本编辑器 不要直接使用，而是使用上面的editor
simditor: "lib/simditor/simditor",
"simple-module": "lib/simditor/module",

144
static/src/js/lib/formValidation/validator/remote.js
View File

@@ -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) {
}(this, function ($, FormValidation, csrfHeader) {
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(),
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();
}
var dfd = new $.Deferred(), ajaxData = {};
ajaxData[options.field] = $field.val();
if ($field.val() === '')
return true;
var url = options.url;
var xhr = $.ajax({
beforeSend: csrfHeader,
url: url,
dataType: 'json',
data: ajaxData,
method: "post"
});
xhr.success(function(response) {
dfd.resolve($field, 'remote',{valid:!response.data, message:options.msg});
})
.error(function(response) {
dfd.resolve($field, 'remote', {valid: false});
});
return dfd;
}
};
return FormValidation.Validator.remote;
}));

146
static/src/js/lib/formValidation/validator/remotex.js Normal file
View File

@@ -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;
}));

37
static/src/js/lib/formValidation/validator/usernameCheck.js
View File

@@ -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;
}
};
}));

3
static/src/js/utils/validation.js
View File

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

4
template/oj/account/register.html
View File

@@ -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="密码">