JavaScript 表单

JavaScript 能够用于验证 HTML 表单。

一、获取表单的值

1. 输入框

通过 元素.value 可以获得输入框中的值。

1
var input_text = document.getElementById(元素id).value;

如果要修改元素的输入框值，请使用以下方法：

1
2
var input_text = document.getElementById(元素id);
input_text.value

2. 单选多选框

1
2
<input type="radio" name="sex" value="man" id="man"> 男
<input type="radio" name="sex" value="woman" id="woman"> 女

此时通过 value 将只能获得固定值。

1
2
document.getElementById("man").value  // 固定为man
document.getElementById("woman").value  // 固定为woman

正确的做法是：通过 checked 获得该选项是否被选中。

1
document.getElementById(选项id).checked  // 若被选中则为true，否则为false

​

二、前端密码 MD5 加密

1. md5 与加密

  • md5 可以用于：文件完整性校验、密码保护、防篡改

  • 单纯 md5 可能不够安全，可以尝试以下解决方案：

    • 多次 md5
    • 密码加盐（在密码中插入特定字符串）后 md5

2. blueimp-md5 第三方类库

在 HTML 文档中引入 md5 库

1
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>

获取最新链接方法：

在公共 CDN 中搜索 blueimp-md5

blueimp-md5 (v2.18.0) - JavaScript MD5 implementation. | BootCDN

3. md5 加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="#" method="POST">
	<span>用户:</span>
    <input type="text" id="name" name="name">
    <br>
    <span>密码:</span>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" id="submit" value="提交">
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>

<script>
    document.getElementById("submit").onclick = function(){fun()};
    function fun() {
        let password = document.getElementById("password");
        password.value = md5(password.value);
    }
</script>

通过 md5(值) 将密码加密。

4. 双密码框

只有设置了 name 的 input 才能在提交表单时传递它们的值。因此可以设置两个密码框，一个用于接收用户密码，另一个用于计算加密结果并传递给服务器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form action="#" method="POST">
	<span>用户:</span>
    <input type="text" id="name" name="name">
    <br>
    <span>密码:</span>
    <input type="password" id="inputPassword">
    <br>
    <input type="hidden" id="password" name="password">
    <br>
    <input type="submit" id="submit" value="提交">
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>

<script>
    document.getElementById("submit").onclick = function(){fun()};
    function fun() {
        let inputPassword = document.getElementById("inputPassword");
        let password = document.getElementById("password");
        password.value = md5(inputPassword.value);
    }
</script>

这样做的好处有：

密码框不会在用户提交时突然改变其元素个数（例如密码个数为 6 位，但加密后变成 32 位），使加密过程对用户不透明

​

三、校验表单

1. 什么是数据验证

数据验证是为了确保用户输入的数据干净、正确且有用。验证主要有两种方式：

  • 服务器端验证：由 web 服务器执行，数据送往服务器之后验证

  • 客户端验证：由浏览器执行，数据送往服务器之前验证

    这里的验证有两种方式：

    • 在 HTML 标签中，利用属性值进行，可以限定数据范围、要求用户必须输入、要求数据必须符合正则表达式、规定数据的类型等
    • 利用 JavaScript 进行验证

2. 实现方式

  • 首先为表单设置事件

    1
    <form onsubmit = "return fun()">

  • 在函数中判断数据的有效性，并选择提交或拒绝提交

​

四、验证实例

1.验证表单是否被填写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须填写姓名！");
    return false;
  }
}
</script>
</head>
<body>
<form name="myForm" action="/demo/action_page.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>
</body>
</html>
姓名：

​

2. 验证数字范围

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  var x, text;

  // 获取 id="numb" 的输入字段的值
  x = document.getElementById("numb").value;

  // 如果 x 不是数字或小于 1 或大于 10
  if (isNaN(x) || x < 1 || x > 10) {
    text = "输入无效";
  } else {
    text = "输入有效";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
</head>

<body>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
</body>
</html>

​

五、表单 API

1. 方法

方法 描述
checkValidity() 如果 input 元素包含有效数据，则返回 true
setCustomValidity() 设置 input 元素的 validationMessage 属性。

2. 属性

属性 描述
validity input 元素是否非法
validationMessage 非法时浏览器显示的消息。
willValidate 是否验证 input 元素。

3. 具体合法性属性

属性 描述
customError 如果设置自定义的合法性消息
patternMismatch 如果元素值不匹配其 pattern 属性，则为 true
rangeOverflow 如果元素值大于其 max 属性，则为 true
rangeUnderflow 如果元素值小于其 min 属性，则为 true
stepMismatch 当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，则为 true
tooLong 如果元素值超过了其 maxLength 属性，则为 true
typeMismatch 如果数据的类型不匹配，则为 true
valueMissing 如果必填元素没有值，则为 true
valid 如果元素值是有效的，则为 true

​

参考