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

我在

Django

中创建了一个模板，它基于模型生成表单。当前提交

表单

时，表单密码字段中以前的数据将被放入

数据库

，而不是执行

onclick

操作后“id\u password”字段中包含的更改值。我想要的是

JavaScript

执行其

功能

，然后在执行

功能

后，表单与字段中的数据一起提交

有人能提供一些见解吗

{% 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 %}

{%extends“base.html”%}
{%load staticfiles%}
{%block content%}
要将帐户添加到您的钱包，请填写下表，然后单击“将帐户添加到钱包”
加载加密文件
{%csrf_令牌%}

{{form}}

函数handleFiles（）{
var file=document.getElementById（'input'）。文件[0]；
var reader=new FileReader（）；
reader.readAsText（文件）；
reader.onload=函数（e）{
var key=reader.result；
var element=document.getElementById（“id\U密码”）
var password=element.value；
var key_256=aesjs.utils.utf8.toBytes（key）
var textBytes=aesjs.utils.utf8.toBytes（密码）；
var aesCtr=新aesjs.ModeOfOperation.ctr（键256）；
var encryptedBytes=aesCtr.encrypt（textBytes）；
var encryptedHex=aesjs.utils.hex.fromBytes（encryptedBytes）；
element.value=加密十六进制；
};
}
单击返回您的钱包

{%endblock%}

我要研究的是JS装饰器模式。装饰师非常强大，您不需要做太多更改

---

您不能在Javascript中执行此操作。任何不称职的黑客都可以忽略或更改JS中运行的代码。所有验证都必须在后端进行

---

幸运的是，Django已经有了一个设置和散列密码的全面框架。

我在这里不是散列密码，我正在为我的大学项目创建一个密码钱包，我希望在客户端执行所有加密，以避免发送密钥。