javascript 文本校验框-CFANZ编程社区

javascript 文本校验框_ci
实现效果：
javascript 文本校验框_ci_02
javascript 文本校验框_css_03
<!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>Document</title>
    <style>
        body {
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #f3f3f3;
}

h1 {
  margin-top: 50px;
  margin-bottom: 20px;
  font-size: 2em;
  color: #444;
}

#clock {
  margin-bottom: 20px;
  font-size: 1.2em;
  color: #666;
}

.form-item {
  margin-top: 20px;
  text-align: left;
  line-height: 2;
}

.form-item label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
  color: #333;
}

.form-item input[type=text],
.form-item select {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
  outline: none;
}

.form-item input[type=text]:focus,
.form-item select:focus {
  border-color: #5298d2;
}

.form-item button {
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 3px;
  border: none;
  outline: none;
  background-color: #5298d2;
  color: white;
  cursor: pointer;
}

.form-item button:hover {
  background-color: #3786c7;
}

.form-item input[type=radio],
.form-item input[type=checkbox] {
  margin-right: 10px;
}

.form-item input[type=radio]:checked+label,
.form-item input[type=checkbox]:checked+label {
  font-weight: bold;
  color: #5298d2;
}

.form-item button#submitForm {
  margin-top: 30px;
  width: 120px;
  height: 40px;
  background-color: #5298d2;
  color: white;
  font-size: 1.2em;
  border-radius: 5px;
  border: none;
}

.form-item button#submitForm:hover {
  background-color: #3786c7;
}

    </style>
</head>
<body>
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>个人信息注册</h1>
    <div id="clock"></div>
    <form>
        <div class="form-item">
            <label for="name">姓名：</label>
            <input type="text" id="name" required>
        </div>
        <div class="form-item">
            <label for="password">密码：</label>
            <input type="text" id="password" readonly>
            <button type="button" id="generatePassword">生成密码</button>
        </div>
        <div class="form-item">
            <label>性别：</label>
            <input type="radio" name="gender" value="male" checked>男
            <input type="radio" name="gender" value="female">女
        </div>
        <div class="form-item">
            <label for="age">年龄：</label>
            <input type="text" id="age" pattern="\d+" required>
        </div>
        <div class="form-item">
            <label for="city">所在城市：</label>
            <select id="city">
                <option value="Beijing">北京</option>
                <option value="Shanghai">上海</option>
                <option value="Guangzhou">广州</option>
                <option value="Shenzhen">深圳</option>
            </select>
        </div>
        <div class="form-item">
            <label>爱好：</label>
            <input type="checkbox" name="hobby" value="reading">阅读
            <input type="checkbox" name="hobby" value="music">音乐
            <input type="checkbox" name="hobby" value="sports">运动
            <input type="checkbox" name="hobby" value="travel">旅游
            <input type="checkbox" name="hobby" value="food">美食
        </div>
        <div class="form-item">
            <button type="button" id="submitForm">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>

    <script src="script.js"></script>
</body>
</html>
   
</body>
<script>
    // 获取HTML元素
const clockEle = document.getElementById("clock");
const nameInput = document.getElementById("name");
const passwordInput = document.getElementById("password");
const generatePasswordBtn = document.getElementById("generatePassword");
const ageInput = document.getElementById("age");
const submitFormBtn = document.getElementById("submitForm");

// 获取当前时间并显示在页面上
function showTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const day = ["日", "一", "二", "三", "四", "五", "六"][now.getDay()];
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();
    clockEle.textContent = `${year}年${month}月${date}日 星期${day} ${hour}:${minute}:${second}`;
}
showTime(); // 首次加载页面时显示时间
setInterval(showTime, 1000); // 每秒钟更新时间

// 点击“生成密码”按钮，生成随机密码并填写到密码框中
generatePasswordBtn.addEventListener("click", function() {
    const password = Math.random().toString(36).slice(-8);
    passwordInput.value = password;
});

// 点击“提交”按钮，显示拼接提示信息
submitFormBtn.addEventListener("click", function() {
    const name = nameInput.value.trim();
    const password = passwordInput.value.trim();
    const gender = document.querySelector("input[name=gender]:checked").value;
    const age = parseInt(ageInput.value.trim());
    const city = document.getElementById("city").value;
    const hobbyArr = Array.from(document.querySelectorAll("input[name=hobby]:checked")).map((ele) => ele.value);
    const hobby = hobbyArr.length > 0 ? hobbyArr.join(",") : "无";
    if (!name) {
        alert("请输入姓名！");
        return;
    }
    if (!age || isNaN(age)) {
        alert("年龄必须是数字！");
        return;
    }
    const msg = `${name}您好，您的密码是${password}，您所在的城市是${city}，年龄是${age}，您的爱好是${hobby}`;
    alert(msg);
});

</script>
</html>