为什么出不来呢
跪求源码~万分感谢，yahui1518@163.com
3 回答
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validation</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="login"> <form action=""> <div> <label> <span>会员名：</span> <input type="text" name="username"> </label> <span><i></i>OK</span> <p>您已经输入7个字符</p> </div> <div> <label> <span>登录密码：</span> <input type="text" name="password"> </label> <span><i></i>OK</span> <p><span class="strength strength-active">弱</span><span>中</span><span>强</span></p> </div> <div> <label> <span>确认密码：</span> <input type="text" name="password2" disabled> </label> <span><i></i>OK</span> </div> <div> <input type="submit" value="同意协议并注册"> </div> </form> </div> </body> </html>
window.onload = function() {
var login = document.getElementById('login');
var input = login.getElementsByTagName('input');
var msg = login.getElementsByClassName('msg');
var userName = input[0], // 获取用户名输入框
userName_msg = msg[0],
count = document.getElementsByClassName('count')[0];
var userNameTest = 333;
var pwd = input[1], // 获取登录密码输入框
pwd_msg = msg[1];
var strength = document.getElementsByClassName('strength'); // 获取密码强弱程度状态标识
var pwd2 = input[2], // 获取确认密码输入框
pwd2_msg = msg[2]
var nameLength = 0;
userName.onfocus = function(){
userName_msg.style.display = 'block';
userName_msg.innerHTML = '请输入8-25个字符，只限于英文，汉字，数字，下划线，不可使用特殊符号';
}
userName.onkeyup = function(){
nameLength = getLength(this.value);
count.innerHTML = '您已经输入'+ nameLength +'个字符';
if(this.value == '') {
count.style.display = 'none';
}else{
count.style.display = 'block';
}
}
userName.onblur = function(){
// 含有非法字符
var tes = /[^\w\u4e00-\u9fa5]/g; // \w 表示a-zA-Z 0-9 和_ 这些单字符，\u4e00-\u9fa5表示中文字符
if(tes.test(this.value)) {
userName_msg.innerHTML = '含有非法字符';
}
// 内容为空
else if(nameLength == 0) {
userName_msg.innerHTML = '输入内容不能为空';
}
// 长度超过25个字符
else if(nameLength > 25) {
userName_msg.innerHTML = '输入内容不能超过25个字符';
}
// 长度少于6个字符
else if(nameLength < 6) {
userName_msg.innerHTML = '输入内容不能少于6个字符';
}
// 符合要求 OK
else{
userName_msg.innerHTML = 'OK';
}
}
pwd.onfocus = function() {
pwd_msg.style.display = 'block';
pwd_msg.innerHTML = '6-16个字符，请使用字母加数字或符号的组合，不能单独使用字母、数字或者符号';
}
pwd.onkeyup = function() {
var pwdLen = this.value.length;
// 大于6个字符时，密码强度为‘中’
if(pwdLen > 6){
pwd2.removeAttribute('disabled');
pwd2_msg.style.display = 'block';
pwd2_msg.innerHTML = '请再次输入密码'
strength[1].className = 'strength strength-active';
} else{
pwd2.setAttribute('disabled','true');
pwd2_msg.style.display = 'none';
strength[1].className = 'strength';
}
// 大于12个字符时，密码强度为‘强’
if(pwdLen > 12){
strength[2].className = 'strength strength-active';
} else{
strength[2].className = 'strength';
}
}
pwd.onblur = function() {
var val = this.value;
var m = findStr(val,val[0]);
var re_n = /[^\d]/g; // 除了数字以外的所有字符
var re_l = /[^a-zA-Z]/g; // 除了字母以外的所有字符
// 密码不能为空
if(val == ''){
pwd_msg.innerHTML = '密码不能为空'
}
// 不能使用相同字符
else if(m == val.length){
pwd_msg.innerHTML = '密码不能为相同字符'
}
// 长度应为6-16个字符
else if(val.length < 6){
pwd_msg.innerHTML = '密码长度应为6-16个字符'
}
else if(val.length > 16){
pwd_msg.innerHTML = '密码长度应为6-16个字符'
}
// 不能全为数字
else if(!re_n.test(val)){
pwd_msg.innerHTML = '密码不能全为数字'
}
// 不能全为字母
else if(!re_l.test(val)){
pwd_msg.innerHTML = '密码不能全为字母'
}
// 符合要求 OK
else {
pwd_msg.innerHTML = 'OK'
}
}
pwd2.onblur = function() {
var pwdVal = pwd.value;
var pwd2Val = pwd2.value;
if(pwdVal == pwd2Val) {
pwd2_msg.innerHTML = 'OK'
}else{
pwd2_msg.innerHTML = '两次输入不一致'
}
}
}
function getLength(str) {
return str.replace(/[^\x00-xff]/g,'xx').length; // \x00-xff 这区间都为单字节
}
function findStr(str, n) {
var tmp = 0;
for(var i=0; i<str.length; i++){
if(str.charAt(i) == n){
tmp++;
}
}
return tmp;
}
#login div{
margin-top: 20px;
}
.msg, .count{
display: none;
}
.strength{
display: inline-block;
width: 49px;
line-height: 20px;
background-color: #fc6d00;
color: #fff;
text-align: center;
font-size: 14px;
}
.strength-active{
background-color: #fc2d00;
}
.submit{
width: 300px;
margin-top: 20px;
text-align: center;
}
.subBtn{
display: inline-block;
padding: 5px 8px;
}<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validation</title> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> </head> <body> <div id="login"> <form action=""> <div> <label> <span>会员名：</span> <input type="text" name="username"> </label> <span><i></i>OK</span> <p>您已经输入7个字符</p> </div> <div> <label> <span>登录密码：</span> <input type="text" name="password"> </label> <span><i></i>OK</span> <p><span class="strength strength-active">弱</span><span>中</span><span>强</span></p> </div> <div> <label> <span>确认密码：</span> <input type="text" name="password2" disabled> </label> <span><i></i>OK</span> </div> <div> <input type="submit" value="同意协议并注册"> </div> </form> </div> </body> </html>
window.onload = function() {
var login = document.getElementById('login');
var input = login.getElementsByTagName('input');
var msg = login.getElementsByClassName('msg');
var userName = input[0], // 获取用户名输入框
userName_msg = msg[0],
count = document.getElementsByClassName('count')[0];
var userNameTest = 333;
var pwd = input[1], // 获取登录密码输入框
pwd_msg = msg[1];
var strength = document.getElementsByClassName('strength'); // 获取密码强弱程度状态标识
var pwd2 = input[2], // 获取确认密码输入框
pwd2_msg = msg[2]
var nameLength = 0;
userName.onfocus = function(){
userName_msg.style.display = 'block';
userName_msg.innerHTML = '请输入8-25个字符，只限于英文，汉字，数字，下划线，不可使用特殊符号';
}
userName.onkeyup = function(){
nameLength = getLength(this.value);
count.innerHTML = '您已经输入'+ nameLength +'个字符';
if(this.value == '') {
count.style.display = 'none';
}else{
count.style.display = 'block';
}
}
userName.onblur = function(){
// 含有非法字符
var tes = /[^\w\u4e00-\u9fa5]/g; // \w 表示a-zA-Z 0-9 和_ 这些单字符，\u4e00-\u9fa5表示中文字符
if(tes.test(this.value)) {
userName_msg.innerHTML = '含有非法字符';
}
// 内容为空
else if(nameLength == 0) {
userName_msg.innerHTML = '输入内容不能为空';
}
// 长度超过25个字符
else if(nameLength > 25) {
userName_msg.innerHTML = '输入内容不能超过25个字符';
}
// 长度少于6个字符
else if(nameLength < 6) {
userName_msg.innerHTML = '输入内容不能少于6个字符';
}
// 符合要求 OK
else{
userName_msg.innerHTML = 'OK';
}
}
pwd.onfocus = function() {
pwd_msg.style.display = 'block';
pwd_msg.innerHTML = '6-16个字符，请使用字母加数字或符号的组合，不能单独使用字母、数字或者符号';
}
pwd.onkeyup = function() {
var pwdLen = this.value.length;
// 大于6个字符时，密码强度为‘中’
if(pwdLen > 6){
pwd2.removeAttribute('disabled');
pwd2_msg.style.display = 'block';
pwd2_msg.innerHTML = '请再次输入密码'
strength[1].className = 'strength strength-active';
} else{
pwd2.setAttribute('disabled','true');
pwd2_msg.style.display = 'none';
strength[1].className = 'strength';
}
// 大于12个字符时，密码强度为‘强’
if(pwdLen > 12){
strength[2].className = 'strength strength-active';
} else{
strength[2].className = 'strength';
}
}
pwd.onblur = function() {
var val = this.value;
var m = findStr(val,val[0]);
var re_n = /[^\d]/g; // 除了数字以外的所有字符
var re_l = /[^a-zA-Z]/g; // 除了字母以外的所有字符
// 密码不能为空
if(val == ''){
pwd_msg.innerHTML = '密码不能为空'
}
// 不能使用相同字符
else if(m == val.length){
pwd_msg.innerHTML = '密码不能为相同字符'
}
// 长度应为6-16个字符
else if(val.length < 6){
pwd_msg.innerHTML = '密码长度应为6-16个字符'
}
else if(val.length > 16){
pwd_msg.innerHTML = '密码长度应为6-16个字符'
}
// 不能全为数字
else if(!re_n.test(val)){
pwd_msg.innerHTML = '密码不能全为数字'
}
// 不能全为字母
else if(!re_l.test(val)){
pwd_msg.innerHTML = '密码不能全为字母'
}
// 符合要求 OK
else {
pwd_msg.innerHTML = 'OK'
}
}
pwd2.onblur = function() {
var pwdVal = pwd.value;
var pwd2Val = pwd2.value;
if(pwdVal == pwd2Val) {
pwd2_msg.innerHTML = 'OK'
}else{
pwd2_msg.innerHTML = '两次输入不一致'
}
}
}
function getLength(str) {
return str.replace(/[^\x00-xff]/g,'xx').length; // \x00-xff 这区间都为单字节
}
function findStr(str, n) {
var tmp = 0;
for(var i=0; i<str.length; i++){
if(str.charAt(i) == n){
tmp++;
}
}
return tmp;
}举报
0/150
提交
取消
