QingdaoU/OnlineJudge
1
0
Fork 0
mirror of https://github.com/QingdaoU/OnlineJudge.git synced 2024-12-29 16:41:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

替换掉商业版的 formvalidation

Browse Source
This commit is contained in:
virusdefender 2015-08-16 12:14:56 +08:00
parent a36268bcc8
commit 83ad1e9f3c
9 changed files with 387 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
account/serializers.py
View File

@ -26,7 +26,7 @@ class UserRegisterSerializer(serializers.Serializer):
class UserChangePasswordSerializer(serializers.Serializer):
username = serializers.CharField(max_length=30)
old_password = serializers.CharField(max_length=30, min_length=6)
old_password = serializers.CharField()
new_password = serializers.CharField(max_length=30, min_length=6)

85
static/src/js/app/oj/account/change_password.js
View File

@ -1,68 +1,25 @@
require(["jquery", "bsAlert", "csrfToken", "formValidation"], function ($, bsAlert, csrfTokenHeader) {
$("#change_password-form").formValidation({
framework: "bootstrap",
fields: {
username: {
validators: {
notEmpty: {
message: "请填写用户名"
}
}
},
password: {
validators: {
notEmpty: {
message: "请填写旧密码"
}
}
},
new_password: {
validators: {
notEmpty: {
message: "请填写新密码"
},
stringLength: {
min: 6,
max: 30,
message: '密码长度必须在6到30位之间'
}
},
onSuccess: function (e, data) {
data.fv.revalidateField('confirm_password');
}
},
confirm_password: {
validators: {
notEmpty: {
message: "请填写确认密码"
},
confirm: {
original: $("#new_password"),
message: "两次输入的密码必须一致"
}
}
require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, csrfTokenHeader) {
$('form').validator().on('submit', function (e) {
e.preventDefault();
var username = $("#username").val();
var newPassword = $("#new_password ").val();
var password = $("#password").val();
$.ajax({
beforeSend: csrfTokenHeader,
url: "/api/change_password/",
data: {username: username, new_password: newPassword, old_password: password},
dataType: "json",
method: "post",
success: function (data) {
if (!data.code) {
window.location.href = "/login/";
}
else {
bsAlert(data.data);
}
}
}
).on('success.form.fv', function (e) {
e.preventDefault();
var username = $("#username").val();
var newPassword = $("#new_password ").val();
var password = $("#password").val();
$.ajax({
beforeSend: csrfTokenHeader,
url: "/api/change_password/",
data: {username: username, new_password: newPassword, old_password: password},
dataType: "json",
method: "post",
success: function (data) {
if (!data.code) {
window.location.href = "/login/";
}
else {
bsAlert(data.data);
}
}
})
});
return false;
});
});

32
static/src/js/app/oj/account/login.js
View File

@ -1,26 +1,6 @@
require(["jquery", "bsAlert", "csrfToken", "formValidation"], function ($, bsAlert, csrfTokenHeader) {
$("#login-form")
.formValidation({
framework: "bootstrap",
fields: {
username: {
validators: {
notEmpty: {
message: "请填写用户名"
}
}
},
password: {
validators: {
notEmpty: {
message: "请填写密码"
}
}
}
}
}
).on('success.form.fv', function (e) {
e.preventDefault();
require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, csrfTokenHeader) {
$('form').validator().on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
@ -38,6 +18,8 @@ require(["jquery", "bsAlert", "csrfToken", "formValidation"], function ($, bsAle
}
}
})
});
});
return false;
}
})
});

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

@ -1,83 +1,12 @@
require(["jquery", "bsAlert", "csrfToken", "validation"], function ($, bsAlert, csrfTokenHeader) {
$("#register-form")
.formValidation({
framework: "bootstrap",
fields: {
username: {
validators: {
notEmpty: {
message: "请填写用户名"
},
stringLength: {
min: 3,
max: 30,
message: '用户名长度必须在3到30位之间'
},
remote: {
message: "用户名已存在",
url: "/api/username_check/",
field: 'username'
}
}
},
password: {
validators: {
notEmpty: {
message: "请填写密码"
},
stringLength: {
min: 6,
max: 30,
message: '密码长度必须在6到30位之间'
}
},
onSuccess: function (e, data) {
data.fv.revalidateField('confirm_password');
}
},
real_name: {
validators: {
notEmpty: {
message: "请填写真实姓名"
}
}
},
confirm_password: {
validators: {
notEmpty: {
message: "请填写确认密码"
},
confirm: {
original: $("#password"),
message: "两次输入的密码必须一致"
}
}
},
email: {
validators: {
notEmpty: {
message: "请填写电子邮箱邮箱地址"
},
emailAddress: {
message: "请填写有效的邮箱地址"
},
remote: {
message: "您已经注册过了",
url: "/api/email_check/",
field: 'email'
}
}
}
}
}
).on('success.form.fv', function (e) {
e.preventDefault();
require(["jquery", "bsAlert", "csrfToken", "validator"], function ($, bsAlert, csrfTokenHeader) {
$('form').validator().on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var username = $("#username").val();
var realName = $("#real_name").val();
var password = $("#password").val();
var email = $("#email").val();
$.ajax({
beforeSend: csrfHeader,
beforeSend: csrfTokenHeader,
url: "/api/register/",
data: {username: username, real_name: realName, password: password, email: email},
dataType: "json",
@ -90,6 +19,8 @@ require(["jquery", "bsAlert", "csrfToken", "validation"], function ($, bsAlert,
bsAlert(data.data);
}
}
})
});
});
return false;
}
})
});

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

@ -19,6 +19,7 @@ var require = {
jqueryUI: "lib/jqueryUI/jquery-ui",
bootstrap: "lib/bootstrap/bootstrap",
datetimePicker: "lib/datetime_picker/bootstrap-datetimepicker.zh-CN",
validator: "lib/validator/validator",
// ------ 下面写的都不要直接用，而是使用上面的封装版本 ------
@ -55,6 +56,7 @@ var require = {
shim: {
bootstrap: {deps: ["jquery"]},
_datetimePicker: {dep: ["jquery"]},
datetimePicker: {deps: ["_datetimePicker"]}
datetimePicker: {deps: ["_datetimePicker"]},
validator: ["jquery"]
}
};

325
static/src/js/lib/validator/validator.js Normal file
View File

@ -0,0 +1,325 @@
/* ========================================================================
* Bootstrap (plugin): validator.js v0.9.0
* ========================================================================
* The MIT License (MIT)
*
* Copyright (c) 2015 Cina Saffary.
* Made by @1000hz in the style of Bootstrap 3 era @fat
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
* ======================================================================== */
+function ($) {
'use strict';
// VALIDATOR CLASS DEFINITION
// ==========================
var Validator = function (element, options) {
this.$element = $(element)
this.options = options
options.errors = $.extend({}, Validator.DEFAULTS.errors, options.errors)
for (var custom in options.custom) {
if (!options.errors[custom]) throw new Error('Missing default error message for custom validator: ' + custom)
}
$.extend(Validator.VALIDATORS, options.custom)
this.$element.attr('novalidate', true) // disable automatic native validation
this.toggleSubmit()
this.$element.on('input.bs.validator change.bs.validator focusout.bs.validator', $.proxy(this.validateInput, this))
this.$element.on('submit.bs.validator', $.proxy(this.onSubmit, this))
this.$element.find('[data-match]').each(function () {
var $this = $(this)
var target = $this.data('match')
$(target).on('input.bs.validator', function (e) {
$this.val() && $this.trigger('input.bs.validator')
})
})
}
Validator.INPUT_SELECTOR = ':input:not([type="submit"], button):enabled:visible'
Validator.DEFAULTS = {
delay: 500,
html: false,
disable: true,
custom: {},
errors: {
match: 'Does not match',
minlength: 'Not long enough'
},
feedback: {
success: 'glyphicon-ok',
error: 'glyphicon-remove'
}
}
Validator.VALIDATORS = {
'native': function ($el) {
var el = $el[0]
return el.checkValidity ? el.checkValidity() : true
},
'match': function ($el) {
var target = $el.data('match')
return !$el.val() || $el.val() === $(target).val()
},
'minlength': function ($el) {
var minlength = $el.data('minlength')
return !$el.val() || $el.val().length >= minlength
}
}
Validator.prototype.validateInput = function (e) {
var $el = $(e.target)
var prevErrors = $el.data('bs.validator.errors')
var errors
if ($el.is('[type="radio"]')) $el = this.$element.find('input[name="' + $el.attr('name') + '"]')
this.$element.trigger(e = $.Event('validate.bs.validator', {relatedTarget: $el[0]}))
if (e.isDefaultPrevented()) return
var self = this
this.runValidators($el).done(function (errors) {
$el.data('bs.validator.errors', errors)
errors.length ? self.showErrors($el) : self.clearErrors($el)
if (!prevErrors || errors.toString() !== prevErrors.toString()) {
e = errors.length
? $.Event('invalid.bs.validator', {relatedTarget: $el[0], detail: errors})
: $.Event('valid.bs.validator', {relatedTarget: $el[0], detail: prevErrors})
self.$element.trigger(e)
}
self.toggleSubmit()
self.$element.trigger($.Event('validated.bs.validator', {relatedTarget: $el[0]}))
})
}
Validator.prototype.runValidators = function ($el) {
var errors = []
var deferred = $.Deferred()
var options = this.options
$el.data('bs.validator.deferred') && $el.data('bs.validator.deferred').reject()
$el.data('bs.validator.deferred', deferred)
function getErrorMessage(key) {
return $el.data(key + '-error')
|| $el.data('error')
|| key == 'native' && $el[0].validationMessage
|| options.errors[key]
}
$.each(Validator.VALIDATORS, $.proxy(function (key, validator) {
if (($el.data(key) || key == 'native') && !validator.call(this, $el)) {
var error = getErrorMessage(key)
!~errors.indexOf(error) && errors.push(error)
}
}, this))
if (!errors.length && $el.val() && $el.data('remote')) {
this.defer($el, function () {
var data = {}
data[$el.attr('name')] = $el.val()
$.get($el.data('remote'), data)
.fail(function (jqXHR, textStatus, error) { errors.push(getErrorMessage('remote') || error) })
.always(function () { deferred.resolve(errors)})
})
} else deferred.resolve(errors)
return deferred.promise()
}
Validator.prototype.validate = function () {
var delay = this.options.delay
this.options.delay = 0
this.$element.find(Validator.INPUT_SELECTOR).trigger('input.bs.validator')
this.options.delay = delay
return this
}
Validator.prototype.showErrors = function ($el) {
var method = this.options.html ? 'html' : 'text'
this.defer($el, function () {
var $group = $el.closest('.form-group')
var $block = $group.find('.help-block.with-errors')
var $feedback = $group.find('.form-control-feedback')
var errors = $el.data('bs.validator.errors')
if (!errors.length) return
errors = $('<ul/>')
.addClass('list-unstyled')
.append($.map(errors, function (error) { return $('<li/>')[method](error) }))
$block.data('bs.validator.originalContent') === undefined && $block.data('bs.validator.originalContent', $block.html())
$block.empty().append(errors)
$group.addClass('has-error')
$feedback.length
&& $feedback.removeClass(this.options.feedback.success)
&& $feedback.addClass(this.options.feedback.error)
&& $group.removeClass('has-success')
})
}
Validator.prototype.clearErrors = function ($el) {
var $group = $el.closest('.form-group')
var $block = $group.find('.help-block.with-errors')
var $feedback = $group.find('.form-control-feedback')
$block.html($block.data('bs.validator.originalContent'))
$group.removeClass('has-error')
$feedback.length
&& $feedback.removeClass(this.options.feedback.error)
&& $feedback.addClass(this.options.feedback.success)
&& $group.addClass('has-success')
}
Validator.prototype.hasErrors = function () {
function fieldErrors() {
return !!($(this).data('bs.validator.errors') || []).length
}
return !!this.$element.find(Validator.INPUT_SELECTOR).filter(fieldErrors).length
}
Validator.prototype.isIncomplete = function () {
function fieldIncomplete() {
return this.type === 'checkbox' ? !this.checked :
this.type === 'radio' ? !$('[name="' + this.name + '"]:checked').length :
$.trim(this.value) === ''
}
return !!this.$element.find(Validator.INPUT_SELECTOR).filter('[required]').filter(fieldIncomplete).length
}
Validator.prototype.onSubmit = function (e) {
this.validate()
if (this.isIncomplete() || this.hasErrors()) e.preventDefault()
}
Validator.prototype.toggleSubmit = function () {
if(!this.options.disable) return
var $btn = $('button[type="submit"], input[type="submit"]')
.filter('[form="' + this.$element.attr('id') + '"]')
.add(this.$element.find('input[type="submit"], button[type="submit"]'))
$btn.toggleClass('disabled', this.isIncomplete() || this.hasErrors())
}
Validator.prototype.defer = function ($el, callback) {
callback = $.proxy(callback, this)
if (!this.options.delay) return callback()
window.clearTimeout($el.data('bs.validator.timeout'))
$el.data('bs.validator.timeout', window.setTimeout(callback, this.options.delay))
}
Validator.prototype.destroy = function () {
this.$element
.removeAttr('novalidate')
.removeData('bs.validator')
.off('.bs.validator')
this.$element.find(Validator.INPUT_SELECTOR)
.off('.bs.validator')
.removeData(['bs.validator.errors', 'bs.validator.deferred'])
.each(function () {
var $this = $(this)
var timeout = $this.data('bs.validator.timeout')
window.clearTimeout(timeout) && $this.removeData('bs.validator.timeout')
})
this.$element.find('.help-block.with-errors').each(function () {
var $this = $(this)
var originalContent = $this.data('bs.validator.originalContent')
$this
.removeData('bs.validator.originalContent')
.html(originalContent)
})
this.$element.find('input[type="submit"], button[type="submit"]').removeClass('disabled')
this.$element.find('.has-error').removeClass('has-error')
return this
}
// VALIDATOR PLUGIN DEFINITION
// ===========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var options = $.extend({}, Validator.DEFAULTS, $this.data(), typeof option == 'object' && option)
var data = $this.data('bs.validator')
if (!data && option == 'destroy') return
if (!data) $this.data('bs.validator', (data = new Validator(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.validator
$.fn.validator = Plugin
$.fn.validator.Constructor = Validator
// VALIDATOR NO CONFLICT
// =====================
$.fn.validator.noConflict = function () {
$.fn.validator = old
return this
}
// VALIDATOR DATA-API
// ==================
$(window).on('load', function () {
$('form[data-toggle="validator"]').each(function () {
var $form = $(this)
Plugin.call($form, $form.data())
})
})
}(jQuery);

15
template/oj/account/change_password.html
View File

@ -7,22 +7,23 @@
<form id="change_password-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名"
autofocus>
<input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名" data-error="请填写用户名" maxlength="30" autofocus required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="password">旧密码</label>
<input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码">
<input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码" data-error="请填写旧密码" maxlength="30" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="new_password">新密码</label>
<input type="password" class="form-control input-lg" id="new_password" name="new_password"
placeholder="新密码">
<input type="password" class="form-control input-lg" id="new_password" name="new_password" placeholder="新密码" maxlength="30" data-minlength="6" data-error="密码不得少于6位" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" class="form-control input-lg" id="confirm_password" name="confirm_password"
placeholder="确认密码">
<input type="password" class="form-control input-lg" id="confirm_password" name="confirm_password" placeholder="确认密码" maxlength="30" data-match="#new_password" data-match-error="两个密码不一致" require>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>

7
template/oj/account/login.html
View File

@ -7,12 +7,13 @@
<form id="login-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名"
autofocus>
<input type="text" class="form-control input-lg" id="username" name="username" maxlength="30" data-error="请填写用户名" placeholder="用户名" autofocus required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码">
<input type="password" class="form-control input-lg" id="password" name="password" maxlength="30" data-error="请填写密码" placeholder="密码" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>

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

@ -7,25 +7,29 @@
<form id="register-form">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名"
autofocus>
<input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名" data-error="请输入用户名" required autofocus>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="real_name">真实姓名</label>
<input type="text" class="form-control input-lg" id="real_name" name="real_name" placeholder="真实姓名">
<input type="text" class="form-control input-lg" id="real_name" name="real_name" placeholder="真实姓名" data-error="请输入姓名" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="email">邮箱地址</label>
<input type="email" class="form-control input-lg" id="email" name="email" placeholder="邮箱地址">
<input type="email" class="form-control input-lg" id="email" name="email" placeholder="邮箱地址" data-error="请填写邮箱" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码">
<input type="password" class="form-control input-lg" id="password" name="password" placeholder="密码" data-minlength="6" data-minlength-error="密码不得少于6位" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" class="form-control input-lg" id="confirm_password" name="confirm_password"
placeholder="确认密码">
placeholder="确认密码" data-match="#password" data-match-error="两个密码不一致" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>