持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第31天点击查看活动详情

操作表单（验证）

表单是什么 from DOM树

文本框 text
下拉框 <Select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.... 表单的目的：提交信息

	<form action="post">
				<span>用户名</span> <input type="text" id="username">
		</form>

		<script>
		var input_text=document.getElementById('username')
		</script>

input_text.value得到输入框的值
input_text.value='xutu'修改输入框的值

QQ截图20220604214141.png

		<form action="post">
				<p>
					<span>性别：</span>
					<input type="radio" name="sex" value="man" id="boy">男
					<input type="radio" name="sex" value="woman" id="girl">女
				</p>
		</form>

		<script>
		var boy_radio=document.getElementById('boy')
		var girl_radio=document.getElementById('girl')
		</script>

对于单选框，多选框无法通过value的方法取到，只能获得当前的值

QQ截图20220604214903.png

boy_radio.checked 查看返回的结果，是否为true，如果为true，则被选中
boy_radio.checked=true赋值

提交表单

		<form action="#">
				<span>用户名</span> <input type="text" id="username">
				<p>
				<span>密码 </span><input type="password" name="password" id="password"/>
				</p>
				<button type="submit" onclick="xitu()">提交</button>
		</form>
		<script>
		function xitu(){
var use=document.getElementById('username')
var pas=document.getElementById('password')
console.log(use.value)
console.log(pas.value)
}

		</script>

QQ截图20220604220815.png

绑定事件 onclick 被点击
此方法不安全可以使用Md5进行加密
表单绑定提交事件，onsubmit绑定一个提交检测的函数，true ,false，将这个结果返回给表单，使用onsubmit接受

jQuery

JavaScript jQuery库，里面存在大量的JavaScript函数

jQuery是一个快速、简洁的JavaScript]框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件
公式： $(selector).action()

JS基础-操作表单

操作表单（验证）

提交表单

jQuery