校驗規則是：用戶名只能有字母，數字，下劃線組成，而且長度是5~12
第一種 方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onclickfun() {
var inpobj = document.getElementById("username");
var textvalue = inpobj.value;
var errormes = document.getElementById("error");
//校驗用戶名只能有字母，數字，下劃線組成，而且長度是5~12
var patt = /^\w{5,12}$/;//正則表達式
if (patt.test(textvalue)) {
// alert("用戶名合法");
errormes.innerHTML = "用戶名合法";
} else {
// alert("用戶名不合法");
errormes.innerHTML = "用戶名不合法";
}
}
</script>
</head>
<body>
用戶名：<input type="text" id="username" value="" />
<button onclick="onclickfun()">校驗</button>
<!-- 提示的錯誤信息 -->
<span id="error" style="color:red;">
</span>
</body>
</html>
截圖顯示：
第二種 方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function onclickfun() {
var inpobj = document.getElementById("username");
var textvalue = inpobj.value;
var errormes = document.getElementById("error");
//校驗用戶名只能有字母，數字，下劃線組成，而且長度是5~12
var patt = /^\w{5,12}$/;////正則表達式
if (patt.test(textvalue)) {
// alert("用戶名合法");
// 但是需要轉義一下才可以的
errormes.innerHTML = "<img src=\"imgs/right.png\" width=\"15\" height=\"15\">";
} else {
// alert("用戶名不合法");
errormes.innerHTML = "<img src=\"imgs/wrong.png\" width=\"15\" height=\"15\">";
}
}
</script>
</head>
<body>
用戶名：<input type="text" id="username" value="" />
<button onclick="onclickfun()">校驗</button>
<!-- 提示的錯誤信息 -->
<span id="error" style="color:red;">
</span>
</body>
</html>
截圖顯示：
注意：照片的路徑要進行轉義一下，否則會不好使。
後面兩個校驗的照片我放到評論裏面…
評論區自取哦~~
最後謝謝觀看~~
好叭，評論裏面放不了，只能在這裏了
