在添加到数据库之前在django表单上执行Javascript函数

时间:2017-03-06 15:28:28

标签: javascript python django

我在Django创建了一个基于模型制作表单的模板。当前提交form时,之前位于表单密码字段中的数据将放入database,而不是包含在" id_Password"中的更改值。执行onclick操作后的字段。我想要的是JavaScript执行其function,然后在执行function后,表单会与字段中的数据一起提交。

任何人都可以提供任何见解吗?

{% extends "base.html" %}
{% load staticfiles %}

{% block content %}

<h2> To add an account to your wallet fill in the form below and click "Add account to wallet" </h2>

<h3>Load your encryption file</h3>
<input type="file" id="input">
<form action="/yourwallet/addpassword/" method="post">{% csrf_token %}
<script type="text/javascript" src="https://cdn.rawgit.com/ricmoo/aes-js/e27b99df/index.js"></script>
    <ul>
    {{form}}
    </ul>
    <input type="submit" name="submit" value="Add account to wallet" onclick="handleFiles()">
    <input type="button" name="test" value="test" onclick="handleFiles()">

    <script>

        function handleFiles() {
            var file = document.getElementById('input').files[0];
            var reader = new FileReader();
            reader.readAsText(file);
            reader.onload = function(e) {
                var key = reader.result;
                var element = document.getElementById("id_Password")
                var password = element.value;
                var key_256 = aesjs.utils.utf8.toBytes(key)
                var textBytes = aesjs.utils.utf8.toBytes(password);
                var aesCtr = new aesjs.ModeOfOperation.ctr(key_256);
                var encryptedBytes = aesCtr.encrypt(textBytes);
                var encryptedHex = aesjs.utils.hex.fromBytes(encryptedBytes);
                element.value = encryptedHex;   
            };
        }

    </script>

</form>

<p> Click <a href="/yourwallet/"> here </a> to return to your wallet. </p>
</body> 
{% endblock %}

2 个答案:

答案 0 :(得分:0)

我要研究的是JS装饰模式。装饰者非常强大,你真的不需要做太多改变。

http://javascript.info/tutorial/decorators

答案 1 :(得分:0)

你不能在Javascript中这样做。任何半职业黑客都可以忽略或更改JS中运行的代码。所有验证都必须在后端进行。

幸运的是,Django已经有了一个用于设置和散列密码的综合框架。