您的位置：首页 > Web前端 > JavaScript

javascript基础编程应用表单验证

2017-04-17 21:08 459 查看

用javascript编程简单实现表单验证的功能。

对应的HTML元素和设计网页如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证</title>
<script src="js4.js" type="text/javascript" ></script>
<style type="text/css">

</style>
</head>

<body>
<form action="js1.html" method="post" onsubmit="return submit1()">
<table width="337" border="2" align="center">
<tr>
<td colspan="2" align="center"><span class="STYLE4">会员注册</span></td>
</tr>
<tr>
<td width="91"><span class="STYLE4">用户名：</span></td>
<td width="228" ><input id="input1" type="text" name="name" value="aaa" onblur="checkname()"/><span id="span1" class="STYLE4">请输入6-10位长度</span></td>
</tr>
<tr>
<td><span class="STYLE4">密码：</span></td>
<td><input id="pwd1" type="text" name="pwd"onblur="checkpwd1()" value=""/><span id="pwds1">密码6-10位数字组成</span></td>
</tr>
<tr>
<td><span class="STYLE4">确认密码：</span></td>
<td><input type="text" name="pwd2" id="pwd2" value="" onblur="checkpwd2()"/><span id="pwds2">请输入的密码与上面的密码一致</span></td>
</tr>
<tr>
<td><span class="STYLE4">年龄：</span></td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td><span class="STYLE4">邮箱：</span></td>
<td><input id="input2"type="text" name="add" value="" onblur="checkadd()" /><span id="spanadd"></span></td>
</tr>
<tr>
<td><span class="STYLE4">性别：</span></td>
<td><input type="radio" name="sex" value="radiobutton" />
<span class="STYLE4">男</span>
<input type="radio" name="sex" value="radiobutton" />
<span class="STYLE4">女</span></td>
</tr>
<tr>
<td height="65" colspan="2"><input name="in" type="submit" value="提交" />
<input name="Input" type="reset" value="重置"/></td>
</tr>
</table>
</form>
</body>
</html>
对应的.js代码为：
function $(id){//封装document.getElementById(id)方法
return document.getElementById(id);

}
var m1=false,m2=false,m3=false,m4=false;
//验证name框里的值是否合法
function checkname(){
var b1=$("input1").value;
//验证用户名的正则表达式
var zb=/^[a-zA-Z0-9_]{6,10}$/;
if(zb.test(b1)){//使用test（）函数验证
//var s1="恭喜你，用户名可以使用";
$("span1").innerHTML='<font color="green">恭喜你，用户名可以使用</font>';//可以改变span中内嵌的内容和字体的颜色
m1=true;

}
else{
//var s2="请重新输入";
$("span1").innerHTML='<font color="red">请重新输入</font>';
$("input1").value="";//将输入框置空
m1=false;
}
}
function checkpwd1(){
var p1=$("pwd1").value;
var zb=/^[0-9]{6,10}$/;
if(zb.test(p1)){
$("pwds1").innerHTML='<font color="green">密码符合</font>';
m2=true;
}else{
$("pwds1").innerHTML='<font color="red">密码不符合，重新输入</font>';
$("pwd1").value="";
m2=false;
}
}
function checkpwd2(){
//确认两次输入密码是否一致
var p1=$("pwd1").value;
var p2=$("pwd2").value;
if(p1==p2){
$("pwds1").innerHTML='<font color="green">√</font>';
$("pwds2").innerHTML='<font color="green">√</font>';
m3=true;
}else{
$("pwds1").innerHTML='<font color="red">×</font>';
$("pwds2").innerHTML='<font color="green">×请再次输入</font>';
m3=false;

}

}
function checkadd(){
var b1=$("input2").value;
var zb=/^[a-zA-Z0-9_]{1,10}[@][a-zA-Z0-9]{1,255}(.cn|.com|.net)$/;
if(zb.test(b1)){
//var s1="恭喜你，用户名可以使用";
$("spanadd").innerHTML='<font color="green">恭喜你，邮箱可以使用</font>';
m4=true;
}
else{
//var s2="请重新输入";
$("spanadd").innerHTML='<font color="red">请重新输入</font>';
$("input2").value="";
m4=false;
}

}
function submit1(){
return m1&&m2&&m3&&m4;//表单在被提交时执行的事件，返回true可提交，可通过设置标志量，当前面的验证都返回true是可提交

}使用onblur离开焦点触发事件。其中事件执行.js中定义的函数.
运行后的截图为：

自己在学习时的一点练习。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航