JS-表单验证
敢于冲撞命运才是天才。 —— 雨果
先看一下最后的效果。
我们首先完成表单部分
<body>
<form action="" name="form1" onsubmit="return fun1();" >
<table border="1" width="30%" >
<tr>
<th colspan="2" align="center" >
用户注册
</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="name" onblur="checkName();" /><font color="red" ></font></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" /><font color="red" ></font></td>
</tr>
<tr>
<td colspan="2" align="center" >
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>下面是验证的逻辑以及代码
<script type="text/javascript"> //如果校验不符合规则,拦截表单的提交 //1 用户名不能为空,并且长度在6到10位之间.只能以英文字母开头. 用户名中只能使用"_"符号. function fun1(){ var flag = true; if(!checkEmail()){ flag = false; } if(!checkName()){ flag = false; } alert(flag); return flag; } //验证邮箱 function checkEmail(){ //1 获得用户输入的邮箱 var email = document.form1.email.value; //2 定义正则 var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/g; //3 校验 if(!reg.test(email)){ //失败=>提示,并返回false addError(document.form1.email,"邮箱不符合规则!"); return false;//拦截表单提交 }else{ removeError(document.form1.email); return true; } } //验证用户名 function checkName(){ //1 获得文本输入框中的内容 //var nameInput= document.getElementsByName("name")[0]; var nameInput = document.form1.name; //var name = nameInput.getAttribute("value"); var name = nameInput.value; //DHTML属性 //2 定义正则表达式对象 var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/g; //3 校验 if(!reg.test(name)){ //校验失败=> 提示用户. //alert("用户需要6到10位,不能以数字开头!"); addError(nameInput,"用户需要6到10位,不能以数字开头!"); return false;//拦截表单提交 }else{ //验证成功=>清除错误信息 removeError(nameInput); return true; } } //添加错误 //参数1 : 标识往那里添加 //参数2 : 错误信息是什么 function addError(where,what){ where.nextSibling.innerHTML=what; } //清除错误 function removeError(where){ where.nextSibling.innerHTML=""; } </script>