1.效果图 :
当每个输入框失去焦点时会通过正则表达式来验证输入的格式是否正确
点击登录按钮后，如果有格式不正确的将无法登录。
当校验全部通过以后才可以登录
2.源代码：
HTML代码：
<body>
<h1 align="center" style="color: crimson">用户登录！红色喜庆！</h1>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>用户名:</td>
<td><input type="text" id="username" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" id="pwd" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="pwds" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="mailbox" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" id="cpn" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>身份证号:</td>
<td><input type="text" id="IDnumber" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" id="site" onblur="fun(this.id)"><span></span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="登录" id="btn" ></td>
</tr>
</table>
</body>
JS代码：
<script>
// 获取 span 元素
var s = document.getElementsByTagName("span");
// 定义正则表达式
var rs0 = /^[A-Z][A-z]{5,19}$/; // 大写字母开头不能有数字,符号只能出现下划线最少6位最多20位
var rs1 = /^[A-Z][A-z0-9\.]{7,14}$/; // 大写字母开头最少8位做多15位
var rs2 = /^[A-Z][A-z0-9\.]{7,14}$/; // 大写字母开头最少8位做多15位 并且要与上面的密码一致
var rs3 = /^[A-z0-9]+@[A-z0-9]+\.[a-z]{1,3}$/; // 邮箱格式 2027206634@qq.com wang13754545.@163.cn
var rs4 = /^1[345678]{2}[0-9]{8}$/; // 第一位只能是1后两位只能是345678剩下的是数字 共可输入11位数字
var rs5 = /^[1-9][0-9]{16}[A-Z0-9]$/; // 第一位不能为0最后一位只能是数字和大写字母 共可输入 18位
var rs6 = /^[\u4e00-\u9fa5]+$/; // 只能是中文
// 当输入框失去焦点时调用该方法验证用户输入格式是否正确
function fun(name) {
switch (name){
case "username":
// 1.用户名
span(name,rs0,s[0]);
break;
case "pwd":
// 2.密码
span(name,rs1,s[1]);
break;
case "pwds":
// 3.确认密码
// 先判断格式是否正确 在判断是否与密码相同
span(name,rs2,s[2]);
if (document.getElementById("pwd").value == document.getElementById("pwds").value && document.getElementById("pwds").value != "") {
s[2].style.color = "green";
s[2].innerHTML = " ✔";
} else {
s[2].style.color = "red";
s[2].innerHTML = " ✘";
}
break;
case "mailbox":
// 4.邮箱
// 2027206634@qq.com wang13754545.@163.cn
span(name,rs3,s[3]);
break;
case "cpn":
// 5.手机号
span(name,rs4,s[4]);
break;
case "IDnumber":
// 6.身份证号
span(name,rs5,s[5]);
break;
case "site":
// 7.地址
span(name,rs6,s[6]);
break;
}
/**
* 判断提交
* 当所有输入框符合格式后才能提交
* @param {Object} name
* @param {Object} rs
* @param {Object} span
*/
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
if(s[0].innerHTML == " ✔" && s[1].innerHTML == " ✔" && s[2].innerHTML == " ✔" &&
s[3].innerHTML == " ✔" && s[4].innerHTML == " ✔" && s[5].innerHTML == " ✔" && s[6].innerHTML == " ✔"){
var name = document.getElementById("username").value;
document.write(name + "欢迎您！");
}else{
alert("格式输入有误或未输入,请再次确认!");
}
}
/**
* 定义一个方法 通过传入每个输入框对应的id名 和对应的正则表达式 来设置span加内容
* @param obj
*/
function span(name,rs,span) {
var id = document.getElementById(name).value;
if (rs.test(id)) {
span.style.color = "green";
span.innerHTML = " ✔";
} else {
span.style.color = "red";
span.innerHTML = " ✘";
}
}
}
</script>
刚刚学习没多久，如果有不对的地方，还请各位指点，感谢支持0.0！