JS表單登入驗證
操作表單
<body>
<form action=" ">
<p><span>姓名:</span><input type="text" id="username"></p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</p>
</form>
<script>
var username = document.getElementById('username');
// 擷取username的值
var name = username.value;
// 修改username的值
username.value = 'hello world';
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>送出表單Demo</title>
<!--這裡引用md5加密工具類-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--在form表單中:
onsubmit="return encryption()可以判斷校驗送出的表單的内容
如果return true ,則可以送出
如果return false,則會過濾送出
-->
<form action="#" method="post" onsubmit="return encryption()">
<span>使用者名:</span><input type="text" id="user" name="username" /><br />
<span>密碼 :</span><input type="password" id="pwd" /><br />
<!--
先設定設定一個隐藏表單,在接收到使用者輸入的密碼後,
對使用者的密碼使用MD5算法進行加密後指派給隐藏表單,使用隐藏表單進行送出
-->
<input type="password" id="md5pwd" name="password" hidden /><br />
<button type="submit">送出</button>
</form>
<script>
function encryption() {
//使用MD5算法進行加密
md5pwd.value = md5(pwd.value);
}
</script>
</body>
</html>
Love and Share