现有一注册页面(表单),提交时要求所有的内容必输,原密码输入离开后,会校验,如果和自己的姓名拼音不一致,提示“原密码错”,光标定位在原密码输入框。原密码正确后,二次输入新密码,若二次新密码不一致,会提示“二次密码不一致”,光标定准在第一次密码输入框中。效果图如下:
时间: 2023-12-07 15:03:18 浏览: 29
好的,以下是对应的 HTML 代码和 JavaScript 代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8">
<style>
label {
display: inline-block;
margin-bottom: 10px;
}
input[type=text], input[type=password] {
padding: 5px;
margin-bottom: 10px;
}
input[type=submit] {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>注册页面</h2>
<form id="register-form">
<label>用户名:</label>
<input type="text" name="username" required><br>
<label>密码:</label>
<input type="password" name="password" id="password" required><br>
<label>确认密码:</label>
<input type="password" name="confirm_password" id="confirm_password" required><br>
<input type="submit" value="提交">
</form>
<script>
var form = document.getElementById("register-form");
var password = document.getElementById("password");
var confirm_password = document.getElementById("confirm_password");
form.addEventListener("submit", function(event) {
// 阻止表单默认提交事件
event.preventDefault();
// 判断原密码是否正确
var name = form.username.value;
var pinyin = getPinyin(name);
if (password.value !== pinyin) {
alert("原密码错误!");
password.focus();
return false;
}
// 判断两次密码是否一致
if (password.value !== confirm_password.value) {
alert("两次密码不一致!");
password.focus();
return false;
}
// 提交表单
alert("注册成功!");
form.submit();
});
// 获取字符串拼音的函数,需要引入 pinyin.js 库
function getPinyin(str) {
var pinyin = window.pinyin.getFullChars(str);
return pinyin.toLowerCase();
}
</script>
</body>
</html>
```
需要注意的是,上述代码还引入了一个 pinyin.js 库,用于将汉字转换成拼音。这个库可以在 GitHub 上找到。