JavaScript03

操作表单

表单的目的:提交信息

获取表单信息

可以通过document.forms["formName"]["formElementName"]获取特定表单的特定name对应的元素
操作表单元素的value值:

let user = document.forms['f1']['user'];
console.log(user.value)
user.value = '123456'

操作单选/复选框的checked值:

sex = document.getElementsByName('sex')[0]
console.log(sex.checked);
sex.checked = false

button绑定函数

button通过onclick属性绑定触发函数

<input type="button" value="btn" onclick="cs()">

<script>
    function cs() {
        let pwd = document.querySelector('#pwd')
        let disablePwd = document.querySelector('input[name=disablePwd]')
    
        console.log(pwd.value)
        disablePwd.value = md5(pwd)
        console.log(disablePwd.value)
    }
</script>

绑定表单提交函数

表单通过onsubmit属性绑定触发函数

<form method="post" action="#" onsubmit="return cs()"></form>

<script>
    function sub() {
        let form = document.forms['f1']
        let pwd = form['pwd']
        console.log(pwd.value)
    
        return pwd.value !== '';
    }
</script>

通过判断return返回绑定函数的返回结果,来决定是否提交表单,当返回true时提交,当返回false时提交失败

绑定的函数

在绑定的函数中获取元素,并获取其value或checked等信息,进行密码md5加密及判断是否符合要求
对于绑定表单提交的函数,需要返回true或false

md5

首先在HTML中引入<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>JS文件,然后即可在自己的JS文件中使用md5()方法

jQuery

jQuery是一个JS库,包含了大量JS方法。
标准语法:$(selecors).action()

  • selectors是一个CSS选择器字符串
  • action是一个触发事件

常用API可以参考:jQuery API中文文档