学了两周的js，做了一个表单验证的demo…
HTML样式：
用户名要求：1-6位英数命名,不以数字开头，不能包含非法符号；
密码要求：6-12位数字、字母组合；单一数字，小写字母，或大写字母，提示密码强度为弱；数字+小写字母、数字+大写字母或小写字母+大写字母，提示密码强度为中；数字、小写字母、大写字母全都包含，提示密码强度为强，不能包含非法符号；
确认密码要求:两次密码输出一致，否则提示密码输出错误
验证码要求：验证码由大小写字母及数字组成，页面一加载就显示验证码，用户输入的验证码不区分大小写，输入错误自动刷新一个新的验证码。
全部输入完毕，点击注册按钮，若格式全部正确，页面提示“注册成功”，若格式错误则输出“请注意红色提示！”
下面开始代码部分…
html css部分大概写了一下，没有过多的修饰…
<body>
用户名:<input id="username" placeholder="1-6位英数命名,不以数字开头"><span id="username_tip"></span><br />
密码:<input id="userpwd" placeholder="6-12位数字、字母组合"> <span id="userpwd1_tip"></span><br />
确认密码: <input id="userpwd2"> <span id="userpwd2_tip"></span> <br />
验证码:<input id="usercode"> <span id="showcode"></span> <span id="usercode_tip"></span><br />
<button id="btn">注册</button>
</body>添加了一个.js文件
var bigList = [];
var lowerList = [];
var numberList = [];
var otherList = ["$", "_"];//字符数组，可自主添加
for (var i = 65; i < 65 + 26; i++) {//A 65 +26获取大写字母A-Z
var bigcode = String.fromCharCode(i);
bigList.push(bigcode);//放入大写字母数组
}
for (var i = 97; i < 97 + 26; i++) {//a 97 +26获取小写字母a-z
var lowerCode = String.fromCharCode(i);
lowerList.push(lowerCode);//放入小写字母数组
}
for (var i = 0; i <= 9; i++) {
numberList.push(i + "");//获取数字数组
}
var list = bigList.concat(lowerList, numberList, otherList);//大小写字母数字加符号组合
var list1 = bigList.concat(lowerList, numberList);//大小写字母加数字组合下面开始写 用户名 部分（以下部分皆是用了函数封装）
//用户名
var usernameInput = document.getElementById("username");
var usernameSpan = document.getElementById("username_tip");
//将用户名部分封装成一个函数
function checkUsername(){
// 用户名部分
var username = usernameInput.value; //获取用户名
if (username.length >= 1 && username.length <= 6) { //长度合法
var firstCode = username.charAt(0); //取出用户输入名字的第一位，赋值给firstCode
if (numberList.indexOf(firstCode) != -1) {//假设firstCode在数字数组里面;
usernameSpan.innerHTML = "不能以数字开头";
usernameSpan.style.color = "red";
} else {
var flag = true; //默认用户输入名字合法;
for (var j = 0; j < username.length; j++) {
var char = username.charAt(j); // 取出用户输入名字的每一位，赋值给firstCode
if (list.indexOf(char) == -1) {//表示用户名中有字符没有包含在list里面,存在非法字符;
flag = false;
break;
}
}
if (flag) {
usernameSpan.innerHTML = "√";
usernameSpan.style.color = "green";
return true;//最后用来提示注册成功
} else {
usernameSpan.innerHTML = "用户名包含非法字符";
usernameSpan.style.color = "red";
return false;//最后用来提示注册未成功
}
}
} else { //长度不合法
usernameSpan.innerHTML = "长度不合法";
usernameSpan.style.color = "red";
return false;//最后用来提示注册未成功
}
}满足条件时显示：
不满足条件时显示
接着是 密码 部分
判断密码是否合法部分是很好思考的，但是在判断密码强度的时候，我最开始想用if语句，获取用户输入密码的每一个字符，判断是否存在在list数组里…结果事实证明我的想法是错误的，后来想到可以用统计的方法…
//密码
var userpwdInput = document.getElementById("userpwd");
var userpwd2Input = document.getElementById("userpwd2");
var userpwdSpan = document.getElementById("userpwd1_tip");
var userpwd2Span = document.getElementById("userpwd2_tip");
//将用户密码部分封装成一个函数
function checkUserpwd(){
//密码部分
var userpwd = userpwdInput.value;
var userpwd2 = userpwd2Input.value;
// 首次输入密码
if (userpwd.length >= 6 && userpwd.length <= 12) {
//此处长度合法;
var flag1 = true; //看里面是否有非法字符,默认合法
for (var i = 0; i < userpwd.length; i++) {
var item = userpwd.charAt(i); //将userpwd里面的值赋给item;
if (list1.indexOf(item) == -1) {
//表示输入的密码里存在非法字符;
flag1 = false;
break;
}
}
if (flag1) {
//密码合法以后判断密码强度
var bigCode = 0; //假设密码中不包含大写字母
var lowerCode = 0; //假设密码中不包含小写字母
var numberCode = 0; //假设密码中不包含数字;
for (var i = 0; i < userpwd.length; i++) {//若包含大写字母bigCode+1
var num = userpwd.charAt(i);
if (bigList.indexOf(num) != -1) {
bigCode = 1;
}
if (lowerList.indexOf(num) != -1) {
lowerCode = 1;
}
if (numberList.indexOf(num) != -1) {
numberCode = 1;
}
}
switch (bigCode + lowerCode + numberCode) {
case 1: //若相加和为1,密码强度为弱
userpwdSpan.innerHTML = "密码强度:弱";
userpwdSpan.style.color = "#99CCCC";
break;
case 2: //若相加和为2,密码强度为中
userpwdSpan.innerHTML = "密码强度:中";
userpwdSpan.style.color = "#0099CC";
break;
case 3: //若相加和为3,密码强度为强
userpwdSpan.innerHTML = "密码强度:强";
userpwdSpan.style.color = "#006699";
break;
}
} else {
userpwdSpan.innerHTML = "用户名包含非法字符";
userpwdSpan.style.color = "red";
return false;//最后用来提示注册未成功
}
} else {
userpwdSpan.innerHTML = "密码长度不合法";
userpwdSpan.style.color = "red";
return false;//最后用来提示注册未成功
}
当再次输入密码的时候只需要判断密码是否与前面一致（下面代码与上面是同一部分）
//再次输入密码
if (userpwd2.length >= 6 && userpwd2.length <= 12) {
for (var k = 0; k < userpwd2.length; k++) {
var index = userpwd2.charAt(k); //将userpwd2中的每一位赋值给index;
for (var n = 0; n < userpwd2.length; n++) {
if (userpwd.charAt(n) == userpwd2.charAt(n)) {
userpwd2Span.innerHTML = "√";
userpwd2Span.style.color = "green";
return true;//最后用来提示注册成功
} else {
userpwd2Span.innerHTML = "两次输入不一致";
userpwd2Span.style.color = "red";
return false;//最后用来提示注册未成功
}
}
}
} else {
userpwd2Span.innerHTML = "两次输入不一致";
userpwd2Span.style.color = "red";
return false;//最后用来提示注册未成功
}
}最后是 验证码 部分
验证码要求由大小写字母及数字组成，页面一加载就显示验证码，用户输入的验证码不区分大小写，输入错误自动刷新一个新的验证码。
//验证码
var usercodeInput = document.getElementById("usercode");//用户输入验证码
var showcodeSpan = document.getElementById("showcode");//显示验证码
var usercodeSpan = document.getElementById("usercode_tip"); //提示错误信息
showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//页面一加载出来就显示验证码
//将用户名部分封装成一个函数
showcodeSpan.onclick = function(){
showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//输入错误后再次点击刷新
}
function checkUsercode(){
var usercode = usercodeInput.value;//点击之后就取值
if (usercode.toUpperCase() == (showcodeSpan.innerHTML).toUpperCase()) { //两边英文字母全部转换成大写,比较相等
usercodeSpan.innerHTML = "√";
usercodeSpan.style.color = "green";
return true;//最后用来提示注册成功
} else {
usercodeSpan.innerHTML="验证码错误";
usercodeSpan.style.color = "red";
return false;//最后用来提示注册未成功
showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//刷新一次 再重新输入新的验证码
}
}
//封装一个获取验证码的函数
function getRandCodeFromList(list,length){
var str = "";
for(var i = 0;i < length ; i++){
var maxIndex = list.length - 1;//找到最大的一个下标赋值给maxIndex(代表验证码有多少个num)
var randIndex = Math.round(Math.random() * maxIndex);//随机生成的下标
var num = list[randIndex];
str += num;
}
return str;
}注册按钮点击后的效果
var btn = document.getElementById("btn");
btn.onclick = function() {
var judge1 = checkUsername();
var judge2 = checkUserpwd();
var judge3 = checkUsercode();
if(judge1 && judge2 && judge3){
alert("注册成功");
}else{
alert("请注意红色错误！");
}
}最终显示结果
最终一个简单表单验证demo就完成了…具体的步骤怎么完成代码的，都写在代码的注释里了…学了好久函数封装，这个damo做完以后就了解的差不多了…
在此告诫大家 年轻人写代码一定要谦虚，写一步看一步，不然就悲催了…
扫一扫
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
