操作表单
表单的目的:提交信息
获取表单信息
可以通过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中文文档