JavaScript表单验证-白红宇

JavaScript表单验证

阅读量：5037 次

发布时间：2019-06-12

本文共 2915 字，大约阅读时间需要 9 分钟。

简单JS表单验证

[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=utf-8" />

<title>无标题文档</title>

<style>

.success

{

color:green;

}

.fail

{

color:red;

}

</style>

<script>

function checkField(reg,objId)

{

var obj = document.getElementById(objId);

var objSpan = document.getElementById(objId+"Span");

if(reg.test(obj.value))

{

objSpan.innerHTML=obj.alt+"OK";

objSpan.className="success";

}

else

{

objSpan.innerHTML=obj.alt+"不符合规则";

objSpan.className="fail";

}

}

function checkUname()

{

var reg = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9_]{2,7}$");

checkField(reg,"uname");

}

function checkRealName()

{

var reg = /^[\u4E00-\u9FA5]{2,8}$/ig;

checkField(reg,"realName");

}

function checkEmail()

{

var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

checkField(reg,"email");

}

function checkPhone()

{

var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;

checkField(reg,"phone");

}

</script>

</head>

<body>

<form action="#" method="post">

<table border="1" bordercolor="blue" cellspacing="0">

<tr>

<td width="100px" >用户名</td>

<td width="400px">

<input name="name" type="text" size="20" id="uname" alt="用户名" οnblur="checkUname();"/>

<span id="unameSpan"></span>

</td>

</tr>

<tr>

<td width="100px" >真实名</td>

<td width="400px"><input name="name" type="text" id="realName" alt="真实名" size="20" οnblur="checkRealName();"/>

<span id="realNameSpan"></span>

</td>

</tr>

<tr>

<td>密码</td>

<td><input name="password" type="password" size="20" /></td>

</tr>

<tr>

<td>重复密码</td>

<td><input name="rpassword" type="password" size="20" /></td>

</tr>

<tr>

<td>年龄</td>

<td><input name="age" type="text" size="20" /></td>

</tr>

<tr>

<td>手机号</td>

<td>

<input type="text" name="phone" size="20" οnblur="checkPhone();" alt="手机号" id="phone">

<span id="phoneSpan"></span>

</td>

</tr>

<tr>

<td>邮箱</td>

<td>

<input type="text" name="email" size="20" οnblur="checkEmail();" alt="邮箱" id="email">

<span id="emailSpan"></span>

</td>

</tr>

<tr>

<td width="100px">性别</td>

<td width="400px">

<input name="sex" type="radio" value="0" />男

<input name="sex" type="radio" value="1" />女

</td>

<tr>

<td>爱好</td>

<td>

<input name="hobby" type="checkbox" value="1" />足球

<input name="hobby" type="checkbox" value="2" />篮球

<input name="hobby" type="checkbox" value="3" />羽毛球

<input name="hobby" type="checkbox" value="4" />乒乓球

</td>

</tr><tr>

<td>班级</td>

<td>

<select name="class">

<option>一年级一班</option>

<option>一年级二班</option>

</select>

</td>

</tr>

<tr>

<td>说明</td>

<td>

<textarea name="introduce" cols="54" rows="6" ></textarea>

</td>

</tr>

<tr>

<td>

<input type="reset" name="reset" value="重置" />

</td>

<td>

<input type="submit" name="submit" value="提交" />

</td>

</tr>

</table>

</body>

</html>

顶

踩

转载于:https://www.cnblogs.com/guanghe/p/6054715.html

你可能感兴趣的文章

C#微信登录-手机网站APP应用

查看>>

HTML5实践 -- iPhone Safari Viewport Scaling Bug

查看>>

一位数据挖掘成功人士给数据挖掘在读研究生的建议

索尼(SONY) SVE1512S7C 把WIN8降成WIN7图文教程

查看>>

时间模块 && time datetime

【JavaScript】Write和Writeln的区别

微信小程序wx:key以及wx:key=" *this"详解：