JavaScript学习笔记（第四天）

来源：互联网发布：淘宝网客服投诉电话编辑：程序博客网时间：2024/05/22 01:58

前面几章都是对如何操作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上传中的操作，主要是验证上传文件的格式是否正确，一般上传是由后台来操作的。

今天就到这把

阅读全文

0 0