javascript基础编程应用表单验证

来源：互联网发布：法国制造业年度数据编辑：程序博客网时间：2024/05/29 19:34

用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"><!--.STYLE4 {font-size: 18px}--></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中定义的函数.

运行后的截图为：

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

1 0