JavaScript——操作表单（MD5验证）

文章目录

用JavaScript来操作表单，可以获得用户输入的内容，或者对一个输入框设置新的内容。

HTML表单主要的输入控件

文本框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

表单的目的：提交信息

HTML5新控件

值	描述
color	定义拾色器。
date	定义日期字段（带有 calendar 控件）
datetime	定义日期字段（带有 calendar 和 time 控件）
datetime-local	定义日期字段（带有 calendar 和 time 控件）
month	定义日期字段的月（带有 calendar 控件）
week	定义日期字段的周（带有 calendar 控件）
time	定义日期字段的时、分、秒（带有 time 控件）
email	定义用于 e-mail 地址的文本字段
number	定义带有 spinner 控件的数字字段
range	定义带有 slider 控件的数字字段。
search	定义用于搜索的文本字段。
submit	定义提交按钮。提交按钮向服务器发送数据。
tel	定义用于电话号码的文本字段。
url	定义用于 URL 的文本字段。

获取值,设置值

获得了一个节点的引用，就可以直接调用value获得对应的用户输入值

<form action="psot">
<p>
       <span>用户名：</span><input type="text" id="username">
   </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy">男
        <input type="radio" name="sex" value="girl">女
    </p>、
    </form>

    <script>
    var input_text =document.getElementById('username');
    var boy_radio =document.getElementById('boy_radio');
    var girl_radio=document.getElementById('girl_radio');

    //得到输入框的值
    input_text.value
    //设置输入框的值
    input_text.value='taoxian'
    //这种方式可以应用于text、password、hidden以及select
    
    //单选框和复选框的获取值和设置值
    //对于单选框和复选框，value属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用checked判断
        boy_radio.value//返回的永远是HTML预设的值
        boy_radio.checked  //true或者false
        boy_radio.checked=ture //赋值(被选中)
</script>

表单验证(MD5验证)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--MD5工具类    -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
                                                                      <!--    通过表单绑定事件，提交表单来触发 onsubmit：绑定一个提交检测的函数
-->
<form action="https://blog.csdn.net/wpc2018?spm=1000.2115.3001.5343" method="post" onsubmit="return peng()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password"id="input-password" >
    </p>
    <input type="hidden" id="md5-password" name="password">
    <input type="submit" value="登录">
    <!--    通过按钮绑定事件，点击按钮来触发
    <button type="button" οnclick="cheng()">提交</button>
    -->
</form>

<script>
    function cheng(){
     
     
       var uname = document.getElementById('username');
       var pwd = document.getElementById('input-password');
       var md5pwd = document.getElementById('md5-password');

     md5pwd.value=md5(pwd.value);
     return true;

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

注意到id为md5-password的标记了name=“password”，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。

JavaScript——操作表单（MD5验证）

文章目录

HTML5新控件

获取值,设置值

表单验证(MD5验证)

猜你喜欢