97 lines
3.4 KiB
HTML
97 lines
3.4 KiB
HTML
{% extends '__base__.html' %}
|
|
|
|
{% block title %}注册{% endblock %}
|
|
|
|
{% block beforehead %}
|
|
|
|
<script>
|
|
|
|
function validateEmail(email) {
|
|
var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/;
|
|
return re.test(email.toLowerCase());
|
|
}
|
|
|
|
$(function () {
|
|
var vm = new Vue({
|
|
el: '#vm',
|
|
data: {
|
|
name: '',
|
|
email: '',
|
|
password1: '',
|
|
password2: ''
|
|
},
|
|
methods: {
|
|
submit: function (event) {
|
|
event.preventDefault();
|
|
var $form = $('#vm');
|
|
if (! this.name.trim()) {
|
|
return $form.showFormError('请输入名字');
|
|
}
|
|
if (! validateEmail(this.email.trim().toLowerCase())) {
|
|
return $form.showFormError('请输入正确的Email地址');
|
|
}
|
|
if (this.password1.length < 6) {
|
|
return $form.showFormError('口令长度至少为6个字符');
|
|
}
|
|
if (this.password1 !== this.password2) {
|
|
return $form.showFormError('两次输入的口令不一致');
|
|
}
|
|
var email = this.email.trim().toLowerCase();
|
|
$form.postJSON('/api/users', {
|
|
name: this.name.trim(),
|
|
email: email,
|
|
passwd: CryptoJS.SHA1(email + ':' + this.password1).toString()
|
|
}, function (err, r) {
|
|
if (err) {
|
|
return $form.showFormError(err);
|
|
}
|
|
return location.assign('/');
|
|
});
|
|
}
|
|
}
|
|
});
|
|
$('#vm').show();
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="uk-width-2-3">
|
|
<h1>欢迎注册！</h1>
|
|
<form id="vm" v-on="submit: submit" class="uk-form uk-form-stacked">
|
|
<div class="uk-alert uk-alert-danger uk-hidden"></div>
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label">名字:</label>
|
|
<div class="uk-form-controls">
|
|
<input v-model="name" type="text" maxlength="50" placeholder="名字" class="uk-width-1-1">
|
|
</div>
|
|
</div>
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label">电子邮件:</label>
|
|
<div class="uk-form-controls">
|
|
<input v-model="email" type="text" maxlength="50" placeholder="your-name@example.com" class="uk-width-1-1">
|
|
</div>
|
|
</div>
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label">输入口令:</label>
|
|
<div class="uk-form-controls">
|
|
<input v-model="password1" type="password" maxlength="50" placeholder="输入口令" class="uk-width-1-1">
|
|
</div>
|
|
</div>
|
|
<div class="uk-form-row">
|
|
<label class="uk-form-label">重复口令:</label>
|
|
<div class="uk-form-controls">
|
|
<input v-model="password2" type="password" maxlength="50" placeholder="重复口令" class="uk-width-1-1">
|
|
</div>
|
|
</div>
|
|
<div class="uk-form-row">
|
|
<button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-user"></i> 注册</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% endblock %}
|