第一次写表单
1.表单验证 2020/4/13
用户名不能为空
用户名必须在6~14之间
用户名只能有数字和字母组成,不能包含其他字符
密码和确定密码一致,邮箱地址合法
统一失去焦点
错误提示信息统一在span便签提示,并要求字体12号,红色
文本框再次获得焦点,清空错误提示信息,如果文本框中数据不合法要求清空文本框value
最终表单中所用项均合法方可提交
不行了,不行了,把以前学过的Javascript知识点都运行上了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交</title>
<script type="text/javascript">
window.onload = function(){
var aa = /^\s*$/;
window.onsubmit = checksubmit;
// 获取对象
function d(id){
return document.getElementById(id);
}
// 检查空值
function isnull(obj1,obj2){
var var1 = obj1;
var var2 = obj2;
if(aa.test(var1.value)){
obj2.innerText = "*不能为空";
return false;
}
if(checknumber(var1,var2) == false){
return false;
}
if(checkinput(var1,var2) == false){
return false;
}
return true;
}
// 检查输入个数
function checknumber(obj1,obj2){
var a = obj1.value;
a = a.trim(a)
if(!(a.length >= 6 && a.length <= 14)){
obj2.innerText = "个数必须大于6位小于14位";
return false;
}
return true;
}
// 检查输入
function checkinput(obj1,obj2){
var var1 = obj1.value;
var aa = /^[A-Za-z0-9]*$/;
if(!aa.test(var1)){
obj2.innerText="用户名只能是字母和数字组成"
return false;
}
return true;
}
//重新获取焦点就清空
function checkfous(obj1,obj2){
obj1.onfocus = function(){
obj2.innerText = "";}
}
function checkemil(obj1,obj2){
var a = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var b = obj1.value;
if(b != ""){
if(!a.test(obj1.value)){
obj2.innerText = "邮箱格式错误";
return false;
}
}else{
obj2.innerText = "邮箱不能为空";
return false;
}
}
// 判断value是否相等
function checksame(obj1,obj2,obj3,obj4){
if(obj1.value != ""){
if(!(obj1.value === obj2.value)){
obj4.innerText = "两次密码不一致";
return false;
}
}else{
obj3.innerText = "密码不能为空";
}
return true;
}
// 清楚两个
function checksubmit(){
var select1 = isnull(d("id1"),d("id11")); // 判断是否为空
var select2 = checkemil(d("id4"),d("id44"));//判断邮箱格式
var select3 = checksame(d("id2"),d("id3"),d("id22"),d("id33")); // 判断两个标签alue是否相等
checkfous(d("id1"),d("id11"));
checkfous(d("id2"),d("id22"))
checkfous(d("id3"),d("id33"))
checkfous(d("id4"),d("id44"))
if(select1 == false || select2 == false || select3 == false){
d("form").action="javascript:void(0)";
}else{
alert("表单提交中!...");
}
}
document.getElementById("reset").onclick = function(){
// 成功实现功能
checkfous(d("id1"),d("id11"))
d("id11").innerText="";
checkfous(d("id2"),d("id22"))
d("id22").innerText="";
checkfous(d("id3"),d("id33"))
d("id33").innerText="";
checkfous(d("id4"),d("id44"))
d("id44").innerText="";
}
}
</script>
<style type="text/css">
span{
color:red;
font: 12;
}
</style>
</head>
<body>
<form method="post" id="form" action="">
<pre>
用户名:<input type="text" id="id1"><span id="id11"></span>
密 码:<input type="password" id="id2"/><span id="id22"></span>
确定密码:<input type="password" id = "id3"><span id="id33"></span>
邮 箱:<input type="text" id="id4"/> <span id="id44"></span>
<input type="submit" value="提交" id="submit"> <input type="reset" value="重置" id="reset">
</pre>
</form>
</body>
</html>