java Script学习笔记(五)----操作DOM对象之表单验证和加密

文章目录

表单加密

java Script学习笔记(五)----操作DOM对象之表单验证和加密
java Script学习笔记(五)----操作DOM对象之表单验证和加密

form中的onSubmit是表单级别的,当aaa()返回true时,表单才会提交,如果返回false,则不会提交

如果使用按钮的onClick,就无法通过回车直接提交表单,所以推荐使用表单级别的onSubmit

上述代码中,是最合适的加密方式,加密后的密码设置为hidden类型的input,这样用户就不可见,且加密完成时密码不会突然变长,密码的加密一般使用md5加密

MD5在线链接:https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

加密效果:
java Script学习笔记(五)----操作DOM对象之表单验证和加密
java Script学习笔记(五)----操作DOM对象之表单验证和加密

使用JQuery方式进行加密

从上面可以看到使用原生的JS进行加密还是过于繁琐,所以我们还是使用JQuery来操作

<div>
  <form action="#" method="post" onsubmit="return check()">
    <p>
        <span>username:</span><input type="text" name="username" id="uname">
    </p>
    <p>
        <span>password:</span><input type="password" name="password" id="pwd">
    </p>
    <p>
        <input type="hidden" name="hidepwd" id="hidepwd">
    </p>
    <p>
        <input type="submit" name="" id="">
    </p>
  </form>
</div>
<script>
   function check(){
    var hidepwd=md5($('#pwd').val());
    $('#hidepwd').val(hidepwd);
    return true;
}
</script>
上一篇:MD5加密


下一篇:window.location.href = window.location.href window.location.reload()