javascript简单表单验证小实验.docVIP

Javascript介绍 HTML页面是一棵文档树，这个树的根是html标签，js则处于HTML中的一对script标签中，在js中，可以通过标签的名字或者id来得到一个标签元素用法为：document.getElementById(“id”);或者也可以通过标签名来得到元素，不过这样得到的是一组元素，用法：document.getElementsByTagName(“tagname”)。 以下是一个js表单验证的例子： %@ page language=java import=java.util.* pageEncoding=GBK% !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head titlejavascript test/title script type=text/javascript function check() { //得到id为name的标签元素 var name = document.getElementById(name); //得到id为age的标签元素 var age = document.getElementById(age); //value为name标签的一个属性，值是用户输入到文本框中的文本，判断输入是否为空 if (name.value == ) { //弹出警告框，提示姓名不能为空 alert(姓名不能为空！); //返回flase return false; } if (age.value == ) { alert(年龄不能为空！); return false; } //match为正则匹配，[0-9]表示0到9中的任意一个数字，+表示重复一次或多次 if (!age.value.match([0-9]+)) { alert(不合法的年龄！); return false; } } /script /head body form action= name:input type=text id=name /br/ age:input type=text id=age /br/ !-- 如果函数返回flase则onclick返回false，即不提交表单 -- input type=submit onclick=return check() value=submit /form /body /html 这里大量使用了document.getElementById(“”)方法，这是很常用的一个方法，大家应该铭记在心里。注意一点，此处用了提交按钮，即input type=submit onclick=return check() value=submit，因为是提交按钮，它自动触发提交事件，但当onclick=”return false”时，它不会触发提交事件，我们也可以用一个button来代替submit, input type=button onclick=return check() value=submit,不过这样，它默认不会触发提交事件，即使onclick=”return true”时，它也不会提交表单，这时，得显式的在check函数中加上一句代码，通过id得到要提交的表单，调用submit()方法，即： function check() { . . . document.getElementById(“form”).submit(); } form id=form action= name:input type=text id=name /br/ age:input type=text id=age /br/ !-- 如果函数返回flase则onclick返回false，即不提交表单 -- input type=submit onclick=return check() value=submit /form 示例文件：