JavaScript学习笔记（第四天）

时间：2021-09-14 14:45:28

前面几章都是对如何操作DOM节点的，今天学习一下js操作表单。

对表单form的操作其实跟DOM类似，毕竟form也是html的节点。html的表单输入控件主要包括：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作表单</title>
</head>
<body>
<form>
<input type="text">
<br>
<input type="password">
<br>
<input type="radio">
<br>
<input type="checkbox">
<br>
<input type="hidden">
<br>
<select>
<option>语文</option>
<option>数学</option>
<option>英语</option>
</select>
</form>
</body>
</html>

主要是文本框，单选框，密码框，复选框，下拉列表，隐藏文本等

获取form表单的值：

步骤，获取input节点的引用，然后调用value获取输入的值。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作表单</title>
</head>
<body>
<form>
<input type="text" oninput="aa(this)">
<br>
<input type="password">
<br>
<input type="radio">
<br>
<input type="checkbox">
<br>
<input type="hidden">
<br>
<select>
<option>语文</option>
<option>数学</option>
<option>英语</option>
</select>
</form>
<script>
function aa(x) {
 x.blur();
 alert(x.value);
 }
</script>
</body>
</html>

监听文本框的输入，然后让其失去焦点触发，打印form节点输入值。

设置输入值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作表单</title>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="text" id="txt2" value="你好，世界">
<br>
</form>
<script>
var x=document.getElementById('txt')
 x.value="hello world";
</script>
</body>
</html>

跟设置DOM内容一样，先获取节点引用，调用value然后赋值即可。

提交表单：

方式一，通过元素的submit()方法提交一个表单

举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
</head>
<body>
<form id="form1">
<input type="text" id="t1">
<input type="submit" onclick="aa()">
</form>
<script type="text/javascript">
function aa() {
var x=document.getElementById('form1');
 x.submit();
 }
</script>
</body>
</html>

方式二，通过响应form的onSubmit事件

举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form提交方式二</title>
</head>
<body>
<form id="form1">
<input type="text" id="t1">
<input type="submit">
</form>
<script type="text/javascript">
function checkSubmit() {
var x=document.getElementById('form1');
//对输入数据进行验证或者修改操作
return false;
 }
</script>
</body>
</html>

如果return true，即可提交，反之，则不能提交，里面可以进行对输入数据的校验或者修改操作。

但是提交表单的时候，为了保证信息安全，用户信息不能明文提交，所以要用到加密。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form提交方式二</title>
</head>
<body>
<form id="form1" onsubmit="return checkSubmit()" method="post">
<input type="text" id="t1" name="name">
<br>
<input type="password" id="p1" name="pwd">
<br>
<input type="submit">
</form>
<script type="text/javascript">
function checkSubmit() {
var x=document.getElementById('p1');
 x.value=toMD5(x.value);
return true;
 }
</script>
</body>
</html>

但是这样加密会有个问题，就是将密码转换会MD5之后会产生32位的星号在输入框，因为MD5就是32位的，加密就相当于设置form的输入值。

故而用来实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form提交方式二</title>
</head>
<body>
<form id="form1" onsubmit="return checkSubmit()" method="post">
<input type="text" id="t1" name="name">
<br>
<input type="password" id="p1">
<br>
<input type="hidden" name="pwd" id="p2">
</form>
<button onclick="checkSubmit()">submitt</button>
<script type="text/javascript">
function checkSubmit() {
var x=document.getElementById('p1');
var y=document.getElementById('p2');
 y.value=toMD5(x.value);
return true;
 }
</script>
</body>
</html>

这里有三个input，第三个类型为hidden，就隐藏文本的意思，由于密码框没有name，故而不会被提交，将密码框的输入值经过处理赋值给隐藏文本提交，从而确保了数据安全问题。

下面我们来敲一个验证输入内容并提交的例子，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form提交方式二</title>
</head>
<body>
<form id="form1" method="post">
<p> 用户名： <input type="text" id="t1" name="name"></p>

<br>
<p> 密码： <input type="password" id="p1"></p>

<br>
<p>重复密码：<input type="password" id="p2"></p>

</form>
<button onclick="checkSubmit()">submitt</button>
<script type="text/javascript">
function checkSubmit() {
var username_rule = /^[0-9a-zA-Z]{3,10}$/;
var password_rule = /^\w{6,20}$/;
var t = document.getElementById('t1').value;
var x = document.getElementById('p1').value;
var y = document.getElementById('p2').value;
if (t.match(username_rule)) {
 }else {
 alert('用户名必须是3-10位英文字母或数字');
return false;
 }
if(x.match(password_rule)){
 }else {
 alert('口令必须是6-20位');
return false;
 }
if(y!=x){
 alert('两次口令输入不一致');
return false
 }else {
 }
return true;

 }
</script>
</body>
</html>

文件上传：

文件上传的from控件是 

  <input type="file" formenctype="multipart/form-data">

当表单form包含file时，表单的enctype一定要是multipart/form-data，method一定要是post，浏览器才能正确编码并以multipart/form-data上传文件。

js上传中的操作，主要是验证上传文件的格式是否正确，一般上传是由后台来操作的。

今天就到这把
标签：

相关文章