验证用户名是否符合长度要求

<input name="username" value="" length="12" maxlengthd="12"/>
数据库里面username vachar2(12)

这个输入框要求用JAVASCRIPT去验证不能超过12个数字或英文或数字英文组合,还要求不能超过6个汉字,还要验证汉字和字母,数字的组合

如:用户名1999(就可以),麦克斯韦1999(就不行)

因为数据库里面要求的长度是12,一个汉字就占两个,但是在页面可以输入12个汉字
请用JAVASCRIPT写出你的解决方案?


# function test(inputVal)
# {
# //去除首尾空格
# inputValinputVal = inputVal.replace(/^\s*|\s*$/g,"");
# //零长字串不作处理
# if ( inputVal.length == 0 )
# {
# return;
# }
# //只能匹配数字,字母或汉字
# var _match = inputVal.match(/^[a-zA-Z0-9\u4e00-\u9fa5]+$/g);
# //匹配数字或字母(包括大小写)
# var codeMatch = inputVal.match(/[a-zA-Z0-9]/g);
# //匹配汉字
# var charMatch = inputVal.match(/[\u4e00-\u9fa5]/g);
# //数字或字母个数
# var codeNum = codeMatch ? codeMatch.length : 0;
# //汉字个数
# var charNum = charMatch ? charMatch.length : 0;
# //成功
# if ( _match && codeNum + 2*charNum <= 12 )
# {
# alert("输入正确!");
# return;
# }
# //失败
# alert("输入错误!");
# }

全角 半角不考虑
以下是一个简单的百度登录页面的 HTML、CSS 和 JavaScript 代码,包括表单验证输入用户名后的判断是否符合要求的功能: HTML 代码: ``` <!DOCTYPE html> <html> <head> <title>百度登录</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>百度登录</h1> <form id="login-form" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <span id="username-error" class="error-message"></span> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <span id="password-error" class="error-message"></span> <input type="submit" value="登录"> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS 代码: ``` .container { margin: 0 auto; width: 400px; } h1 { text-align: center; } label { display: block; margin-top: 20px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { display: block; margin-top: 20px; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .error-message { color: red; display: block; margin-top: 5px; } ``` JavaScript 代码: ``` const form = document.getElementById("login-form"); const username = document.getElementById("username"); const password = document.getElementById("password"); const usernameError = document.getElementById("username-error"); const passwordError = document.getElementById("password-error"); form.addEventListener("submit", function(event) { event.preventDefault(); if (validateUsername() && validatePassword()) { alert("登录成功!"); } }); function validateUsername() { if (username.value === "") { usernameError.textContent = "用户名不能为空!"; return false; } else if (username.value.length < 6) { usernameError.textContent = "用户名长度不能少于6个字符!"; return false; } else { usernameError.textContent = ""; return true; } } function validatePassword() { if (password.value === "") { passwordError.textContent = "密码不能为空!"; return false; } else if (password.value.length < 6) { passwordError.textContent = "密码长度不能少于6个字符!"; return false; } else { passwordError.textContent = ""; return true; } } ``` 这段代码,我们使用了 HTML5 的 required 属性来确保用户名和密码都不能为空。在 JavaScript ,我们使用了事件监听器来监听 form 的 submit 事件,并阻止了默认的表单提交行为。然后,我们分别编写了 validateUsername() 和 validatePassword() 函数来验证用户名和密码是否符合要求。如果表单验证通过,我们就弹出一个提示框表示登录成功。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值