点击注册的时候,渲染出来,验证码是自动获取出来的
html:
<div class="div1">用户名<input type="text" id="yhm"><span id="span1"></span><br>密码<input type="password" id="mm"><span id="span2"></span><br>Email<input type="email" id="ema"><span id="span3"></span><br>手机号<input type="text" id="sjh"><span id="span4"></span><br>验证码<input type="text" id="yzm" maxlength="4"><span id="span5"></span><br><button id="btn">注册</button></div><p id="p1"></p>
script:
<script>// 用户名验证document.getElementById("yhm").addEventListener("blur", function () {var username = this.value;var spanElement = document.getElementById("span1");var usernameRegex = /^[a-zA-Z0-9]{3,6}$/;if (usernameRegex.test(username)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 密码验证document.getElementById("mm").addEventListener("blur", function () {var password = this.value;var spanElement = document.getElementById("span2");if (password.length >= 6 && password.length <= 16) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// Email验证document.getElementById("ema").addEventListener("blur", function () {var email = this.value;var spanElement = document.getElementById("span3");var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (emailRegex.test(email)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 手机号验证document.getElementById("sjh").addEventListener("blur", function () {var phoneNumber = this.value;var spanElement = document.getElementById("span4");var phoneRegex = /^1\d{10}$/;if (phoneRegex.test(phoneNumber)) {spanElement.innerHTML = '√';} else {spanElement.innerHTML = '×';}});// 生成验证码function generateCaptcha() {var captcha = "";var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for (var i = 0; i < 4; i++) {captcha += characters.charAt(Math.floor(Math.random() * characters.length));}return captcha;}// 显示验证码document.getElementById("yzm").value = generateCaptcha();// 注册按钮点击事件document.getElementById("btn").addEventListener("click", function () {var p1Element = document.getElementById("p1");var yhmInput = document.getElementById("yhm").value;var mmInput = document.getElementById("mm").value;var emaInput = document.getElementById("ema").value;var sjhInput = document.getElementById("sjh").value;var yzmInput = document.getElementById("yzm").value;p1Element.innerHTML = "用户名:" + yhmInput + "<br>" +"密码:" + mmInput + "<br>" +"Email:" + emaInput + "<br>" +"手机号:" + sjhInput + "<br>" +"验证码:" + yzmInput;});