前言
一、验证用户名的代码模型
1.HTML部分的代码
<body>
<form action="../html/test.html" method="post" onsubmit=" return validate()">
<span>请输入邮箱账号:</span>
<input type="text" name="email" id="email" value ="" class="init" οnblur="valiEmaildate()">
<span id=emailMsg></span><br>
<button type = "submit">提交</button>
</form>
</body>
2.css样式表
.init{
background:#ccc;
border:1px #000 solid;
}
.right{
background:#ccc;
border:1px #0f0 solid;
}
.wrong{
background:#ccc;
border:1px #f00 solid;
}
3.JavaScript部分的代码
function valiEmaildate(){
var input = document.getElementById("email");
var emailMsg = document.getElementById("emailMsg");
if(/^\w+@\w+\.\w+$/.test(input.value)){
input.className = "right";
emailMsg.innerHTML = "<font color = 'green'>输入正确</font>";
return true;
}else{
input.className = "wrong";
emailMsg.innerHTML = "<font color = 'red'>输入错误</font>";
return false;
}
}
function validate(){
return valiEmaildate();
}
总结:记录常用的几个知识点:
1、修改元素的class属性----> 元素.className:“新class属性”;
2、失去焦点事件:onblur;获得焦点事件:onfocus;表单提交事件:onsubmit;
3、js中正则表达式:/^ 正则表达式 &/.test(比较的内容);
4、在使用onsubmit接受函数返回时,加上“return”,否则无法正常接受,如:
<form onsubmit="return validate()">