html表单验证

时间：2015-09-12 17:31:13 阅读：970 评论：0 收藏：0 [点我收藏+]

标签：

<!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=utf-8" />
<title>无标题文档</title>
<script>
//全局变量
function clearErr(eleId){
document.getElementById(eleId).style.display="none";
}
var code ; //在全局定义验证码
//用户名验证
function userName(){
var reg=/^[a-z|A-Z][a-z|A-Z|0-9|_]{5,19}$/;
var txtval=document.getElementById("text").value;
if(reg.test( txtval)){
clearErr("userNameCk");
return true;
}
else{
document.getElementById("userNameCk").style.display="";
document.getElementById("userNameCk").innerHTML="<font color=‘red‘>输入不合法</font>";
return false;
}

}

//密码验证
function passName(){
var reg=/^[a-z|A-Z|0-9|_]{5,19}$/;
var txtval2=document.getElementById("text2").value;
if(reg.test( txtva2)){
clear("userNamePs");
return true;
}
else{
document.getElementById("userNamePs").style.display="";
document.getElementById("userNamePs").innerHTML="<font color=‘red‘>输入不合法</font>";
return false;
}
function clear(yeId){
document.getElementById(yeId).style.display="None";
}
}
//验证密码验证
function pass2Name(){
var txtval3=document.getElementById("text3").value;
var txtval2=document.getElementById("text2").value;
if(txtval2==txtval3){
clear2("userNamePs2");
return true;
}
else {
document.getElementById("userNamePs2").style.display="";
document.getElementById("userNamePs2").innerHTML="<font color=‘red‘>前后密码不匹配</font>";
return false;
}

function clear2(aaId){
document.getElementById(aaId).style.display="none";
}

}
//邮箱验证
function emailText(){
var reg=/^[a-z|A-Z|0-9]+@([A-Z|a-z|0-9])+\.com|net|edu|cn$/;
var txtval4=document.getElementById("text5").value;
if(reg.test( txtval4)){
emailText2("em");
return true;
}
else{
document.getElementById("em").style.display="";
document.getElementById("em").innerHTML="<font color=‘red‘>输入不合法</font>";
return false;
}

}
function emailText2(e){
document.getElementById(e).style.display="none";

}
//验证码验证
function createCode()
{
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘,‘k‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘,‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘);

for(var i=0;i<codeLength;i++)
{

var charIndex = Math.floor(Math.random()*14);
code +=selectChar[charIndex];

}
// alert(code);
if(checkCode)
{
checkCode.className="code";
checkCode.value = code;
}

}

function validate ()
{
var inputCode = document.getElementById("input1").value;
if(inputCode.length <=0)
{
alert("请输入验证码！");
}
else if(inputCode != code )
{
alert("验证码输入错误！");
createCode();//刷新验证码
}
else
{
alert("输入正确");
}

}
//提交表单验证
function submitValidator(){
if((document.getElementById ("text").value=="")||(document.getElementById("text2").value=="")||(document.getElementById("text3").value=="")||(document.getElementByName("radio").value=="")||(document.getElementById("text5").value=="")||(document.getElementById("text5").value=="")||(document.getElementById("input1").value==""||(document.getElementById("a").value=="")))
{
alert("必填项不能为空！");
return false;
}
else{
alert("提交成功");
}

}

</script>
<style type="text/css">
.css1 {
color: #999;
}
#form11 {
color: #F00;
}

.code
{
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
} .unchanged
{
border:0;
}

</style></head>

<body >
<form action="http://www.baidu.com" method="post">
<table width="835" border="0">
<tr>
<td colspan="4" align="center" bgcolor="#6699CC">HP-EPM XX公司用户注册</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#6699CC"></td>
</tr>
<tr>
<td width="134" align="right">用户名：</td>
<td width="302">

<input type="text" name="text" id="text" onblur="userName()" onfocus="clearErr(‘userNameCk‘);"/>
</td>
<td width="153" ><div id="userNameCk" style="d"> </div></td>
<td width="228" class="css1"> 英文字母阿拉伯数字下划线组合，长度为6~20位，只能以字母开头</td>
</tr>
<tr>
<td align="right">输入密码：</td>
<td>

<input type="password" name="text2" id="text2" onblur="passName()" onfocus="clear(‘userNamePs‘)"/>
</td>
<td><div id="userNamePs"> </div></td>
<td rowspan="2" class="css1">英文字母阿拉伯数字下划线组合，长度为6~20位</td>
</tr>
<tr>
<td height="37" align="right">验证密码：</td>
<td>

<input type="password" name="text3" id="text3" onblur="pass2Name()" onfocus="clearErr(‘userNamePs2‘)"/>
</td>
<td><div id="userNamePs2"></div></td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#6699cc"></td>
</tr>
<tr>
<td align="right">密码提示问题：</td>
<td>

<select name="chose" id="chose">
<option value="1">您的初恋情人是?</option>
<option value="2">您的QQ号密码是?</option>
<option value="3">您的家乡是哪?</option>

</select>
</td>
<td> </td>
<td class="css1"> </td>
</tr>
<tr>
<td align="right">密码提示答案：</td>
<td>

<input type="text" name="text4" id="textpssNew" onblur="pssNew()"/>
</td>
<td> </td>
<td class="css1">当您忘记密码时，可以通过密码问题和答案来查询，密码提示答案3~32位之间，不能包含特殊字符</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#6699CC"></td>
</tr>
<tr>
<td align="right">出生日期：</td>
<td>

<select name="chose2" id="chose2">
<option value="1">1991</option>
<option value="2">1992</option>

</select>
年

<select name="chose3" id="chose3">
<option value="1">1</option>
<option value="2">2</option>
</select>
月

<select name="chose4" id="chose4">
<option value="1">1</option>
<option value="2">2</option>
</select>
日
</td>
<td> </td>
<td class="css1"> </td>
</tr>
<tr>
<td align="right">性别：</td>
<td>
<input type="radio" name="radio" id="radio" value="radio" />

男
<input type="radio" name="radio" id="radio" value="radio" />女
</td>
<td> </td>
<td class="css1">为了方便您的使用，请填写真实信息</td>
</tr>
<tr>
<td align="right">常用邮箱：</td>
<td>

<input type="text" name="text5" id="text5" onblur="emailText()" onfocus="clearErr(‘em‘)"/>
</td>
<td><div id="em"></div></td>
<td class="css1">方便你取得邮箱账号相关的重要信息，包括找回密码</td>
</tr>
<tr>
<td colspan="4" bgcolor="#6699CC" height="1"></td>
</tr>
<tr>
<td align="right">请输入验证码：</td>
<td>

 <input type="text" onclick="createCode()" id="input1" />

<input type="text" id="checkCode" class="unchanged" style="width: 80px" /><br />
<input id="Button1" onclick="validate();" type="Button" value=" 确定 " /> 

</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4" bgcolor="#6699CC" height="1"></td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="a" id="a" />
我已阅读并接受<a href="T2T3补充练习.docx">服务条款</a>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="submit" name="radio2" id="radio2" value="提交" onclick="submitValidator()" />
</td>
</tr>
<tr>
<td height="1" colspan="4" bgcolor="#6699CC"></td>
</tr>
</table>
</form>
</body>
</html>

html表单验证

标签：

原文地址：http://www.cnblogs.com/rentingting/p/html.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行