方式一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm() {
let username = document.getElementById("username").value;
let regexp = /^\w{6,12}$/;
let flag = regexp.test(username);
if (!flag)
document.getElementById("tip").innerHTML = "用戶名必須是6-12位單詞字符"
return flag;
}
</script>
</head>
<body>
<form action="http://www.baidu.com" onsubmit="return checkForm();">
用戶名<input type="text" id="username"/>
<input type="submit" value="提交"/>
</form>
<span id="tip"></span>
</body>
</html>
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
document.getElementsByTagName("form")[0].onsubmit = function () {
let username = document.getElementById("username").value;
let regexp = /^\w{6,12}$/;
let flag = regexp.test(username);
if (!flag)
document.getElementById("tip").innerHTML = "用戶名必須是6-12位單詞字符";
return flag;
};
}
</script>
</head>
<body>
<form action="http://www.baidu.com">
用戶名<input type="text" id="username"/>
<input type="submit" value="提交"/>
</form>
<span id="tip"></span>
</body>
</html>