CreateTable
<!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 type="text/css">
table{
border:#0099FF 1px solid;
width:600px;
border-collapse:collapse;
}
table td{
border:#0099FF 1px solid;
padding:10px 20px 3px 1px;
}
</style>
<script type="text/javascript">
function createTable(){
/*
创建 一个一行一列的表格
思路:
0、找到div
1、创建表格标签
2、创建行标签
3、创建单元格标签
4、添加文本
5、组合表格
6、将表格添加指定位置 DIV
*/
//找到div
var divNode = document.getElementById("div_id");
//创建表格标签
var tableNode = document.createElement("table");
//创建行标签
var trNode = document.createElement("tr");
//创建单元格标签
var tdNode = document.createElement("td");
//添加文本
tdNode.innerText = "哈哈,我是新创建出来的表格";
//组合表格
trNode.appendChild( tdNode );
tableNode.appendChild( trNode );
//将表格添加指定位置 DIV
divNode.appendChild( tableNode );
}
function createTable2(){
//0、找到div
var divNode = document.getElementById("div_id");
//1、创建表格标签
var tableNode = document.createElement("table");
for(var x=1; x<=5; x++){
//2、创建行标签
var trNode = tableNode.insertRow();
for(var y=1; y<=6; y++){
//3、创建单元格标签
var tdNode = trNode.insertCell();
//4、添加文本
tdNode.innerText = x+"行"+ y +"列";
}
}
//5、组合表格
//6、将表格添加指定位置 DIV
divNode.appendChild( tableNode );
}
function createTable3(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
//0、找到div
var divNode = document.getElementById("div_id");
//1、创建表格标签
var tableNode = document.createElement("table");
for(var x=1; x<=row; x++){
//2、创建行标签
var trNode = tableNode.insertRow();
for(var y=1; y<=col; y++){
//3、创建单元格标签
var tdNode = trNode.insertCell();
//4、添加文本
tdNode.innerText = x+"行"+ y +"列";
}
}
//5、组合表格
//6、将表格添加指定位置 DIV
divNode.appendChild( tableNode );
}
</script>
</head>
<!--
方法:
insertRow 在表格中创建新行(tr),并将行添加到 rows 集合中。
insertCell 在表格行(tr)中创建新单元格,并将单元格添加到 cells 集合中。
-->
<body>
<div id="div_id">
</div>
<input type="button" value="创建表格" οnclick="createTable()" /><br />
<input type="button" value="创建表格(5行6列)" οnclick="createTable2()" /><br />
行数:<input type="text" name="row" id="row"/><br />
列数:<input type="text" name="col" id="col"/><br />
<input type="button" name="createButton" value="创建表格(行列用户输入)" οnclick="createTable3()" />
</body>
</html>
DataSort
<!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 type="text/css">
table {
border:#0099FF 1px solid;
border-collapse:collapse;
width:600px;
}
table td{
border:#0099FF 1px solid;
text-align:center;
}
#age:link,#age.visited {
color:#000000;
}
</style>
<script type="text/javascript">
function sortAge(){
//获取当前表格
var tableNode = document.getElementsByTagName("table")[0];
//获取表格中的所有行
//var trNodes = tableNode.getElementsByTagName("tr");
var trNodes = tableNode.rows;
//创造新数组 该数组用来存储行的数据
var arr = new Array(trNodes.length -1);
//将行的数据 复制到新数组中
for(var x=0; x<arr.length; x++){
arr[x] = trNodes[x+1];
}
//获取行中年龄的值 进行比较
//alert( arr[0] );
//alert( arr[0].cells[1].innerText );
//alert( arr[1].cells[1].innerText );
for(var x=0; x<arr.length-1; x++){
for(var y=x+1; y<arr.length; y++){
//行中年龄的值 进行比较
if(arr[x].cells[1].innerText > arr[y].cells[1].innerText){
//根据年龄比较的结果 进行行的置换
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
//将数组中的行 替换 原有表格中的行
for(var x=0; x<arr.length; x++){
alert(x);
tableNode.appendChild( arr[x] );
}
}
</script>
</head>
<!--
集合:
rows 获取来自于 table 对象的 tr (表格行)对象的集合。
cells 获取表格行或整个表格中所有单元格的集合。
-->
<body>
<table align="center">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sortAge()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>天津</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>上海</td>
</tr>
<tr>
<td>赵六</td>
<td>26</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>22</td>
<td>上海</td>
</tr>
</table>
</body>
</html>
Radio
<!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 type="text/css">
#result1,#result2,#result3,#result4{
display:none;
}
</style>
<script type="text/javascript">
function show(node){
//根据点击的单选按钮 得到value属性值
var value = node.value;
//根据value属性值,找到div,显示DIV
var id = "result" + value;
var divNode = document.getElementById( id );
//隐藏所有的DIV
for(var x=1; x<=4; x++){
var divNode1 = document.getElementById( "result"+x );
divNode1.style.display = "none";
}
//显示当前点击的单选按钮对应的div
divNode.style.display = "block";
}
</script>
</head>
<!--
点击单选按钮 显示对应的div 其他的div隐藏
-->
<body>
<div>
<h3>测试你的性格:</h3>
<div>请选择下列一种水果:</div>
<input type="radio" name="fruit" value="1" οnclick="show(this)" />苹果<br />
<input type="radio" name="fruit" value="2" οnclick="show(this)" />西瓜<br />
<input type="radio" name="fruit" value="3" οnclick="show(this)"/>葡萄<br />
<input type="radio" name="fruit" value="4" οnclick="show(this)"/>芒果<br />
<div id="result1">
您的性格,很羞涩.
</div>
<div id="result2">
您的性格,很开朗.
</div>
<div id="result3">
您的性格,很内向.
</div>
<div id="result4">
您的性格,很醇香.
</div>
</div>
</body>
</html>
Checkbox
<!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 type="text/javascript">
function checkAll(node){
/*
通过标签的name属性的值 来获取对应的标签
getElementsByName(...);
*/
var items = document.getElementsByName("item");
for(var x=0; x< items.length; x++){
items[x].checked = node.checked;
}
}
function check(){
/*
通过标签的name属性的值 来获取对应的标签
getElementsByName(...);
*/
var items = document.getElementsByName("item");
for(var x=0; x<items.length; x++){
items[x].checked = !items[x].checked;
}
}
function getSum(){
/*
将选中的商品金额相加
*/
var sum = 0;
var items = document.getElementsByName("item");
for(var x=0; x<items.length; x++){
if(items[x].checked){
//选中
var value = items[x].value;
sum += parseInt(value);
}
}
var spanNode = document.getElementById("sumId");
spanNode.innerText = sum;
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本3000元<br />
<input type="checkbox" name="item" value="2500"/>HTC手机2500<br />
<input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
<input type="checkbox" name="item" value="1500" />IPAD1500<br />
<input type="checkbox" name="item" value="400" />玩具汽车400<br />
<input type="checkbox" name="all" οnclick="checkAll(this)"/>全选<br />
<input type="checkbox" name="all" οnclick="check()"/>反选<br />
<input type="button" value="总金额" οnclick="getSum()" />
<span id="sumId"></span>
</body>
</html>
Select
<!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 type="text/javascript">
function getCountry(){
//获取下拉框
var selectNode = document.getElementsByName("country")[0];
//找到select中所有option
var options = selectNode.options;
//找到当前选中的option的位置
var index = selectNode.selectedIndex;
//alert( index );
//根据位置 在所有的option中 找到选中的option
var option = options[index]
//显示option中 国家值
var value = option.value;
alert( value );
}
</script>
</head>
<!--
事件:
onchange 当对象或选中区的内容改变时触发。
集合:
options 获取 select 对象中 option 对象的集合。
属性:
selectedIndex 设置或获取选中选项位于 select 对象中的位置
-->
<body>
<select name="country" οnchange="getCountry()">
<option value="none">--选择国家--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
</body>
</html>
SelectCity
<!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 type="text/javascript">
function selectCity(){
//城市
var arr = [
["海淀区","朝阳区","丰台区"],
["石家庄","唐山","秦皇岛"],
["沈阳","大连","鞍山"],
["青岛","济南","烟台"]
];
//找到省份的下拉框
var provinceNode = document.getElementById("province");
//找到所有的省份的option
var provinceOptions = provinceNode.options;
//选中省份的位置
var index = provinceNode.selectedIndex;
//根据位置 得到选中的省份的值 (演示)
//var value = provinceOptions[index].innerText;
//alert( value );
//---------------------------------------
//根据选中的省份位置 找到对应的城市
//["海淀区","朝阳区","丰台区"]
var citys = arr[index -1];
//找到城市的下拉框
var cityNode = document.getElementById("city");
//清除原有城市
cityNode.length = 1;
//向城市的下拉框 添加城市option
for(var x=0; x<citys.length; x++){
// <option>海淀区</option>
var option = document.createElement("option");
option.innerText = citys[x];
//添加到城市下拉框中
cityNode.appendChild( option );
}
}
</script>
</head>
<!--
"海淀区","朝阳区","丰台区"
"石家庄","唐山","秦皇岛"
"沈阳","大连","鞍山"
"青岛","济南","烟台"
思路:
找到省份的下拉框
找到选中的省份值
根据选中的省份值 找到对应的城市
找到城市的下拉框
向城市的下拉框 添加城市option
-->
<body>
<select id="province" οnchange="selectCity()">
<option>--选择省市--</option>
<option>北京市</option>
<option>河北省</option>
<option>辽宁省</option>
<option>山东省</option>
</select>
<select id="city">
<option>--选择城市--</option>
</select>
</body>
</html>
ValidateForm(NotNull)
<!--
用户注册
用户名称 张三
用户密码 123465
用户性别 男
技术爱好 java
所在城市 北京
提交 重置
表格居中显示:
在<table>中,使用align属性 设置为center, 就可以实现表格在页面居中了
事件:
onsubmit 当表单将要被提交时触发。
-->
<html>
<head>
<title>用户注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
alert("用户名不能为空");
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
alert("用户密码不能为空");
return false;
}
//技术爱好
var flag = false; //是否有选中的技术爱好
var techs = document.getElementsByName("technology");
for(var x=0; x<techs.length; x++){
if(techs[x].checked){
flag = true;
}
}
if(!flag){
alert("技术爱好不能为空");
return false;
}
//所选城市
var city = document.getElementsByName("city")[0];
if(city.value == ""){
alert("所选城市不能为空");
return false;
}
}
</script>
</head>
<body>
<form method="post" action="success.html" οnsubmit="return validataForm()" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名称</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>用户性别</td>
<td>
<input type="radio" name="sex" value="nan" checked="checked"/>男
<input type="radio" name="sex" value="nv" />女
</td>
</tr>
<tr>
<td>技术爱好</td>
<td>
<input type="checkbox" name="technology" value="java" checked="checked" />JAVA
<input type="checkbox" name="technology" value="android" />ANDROID
<input type="checkbox" name="technology" value="HTML" />HTML
<input type="checkbox" name="technology" value="IOS" />IOS
</td>
</tr>
<tr>
<td>所在城市</td>
<td>
<select name="city">
<option value="">--选择城市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ValidateForm(Submit、Reset)
<html>
<head>
<title>JS自定义提交、重置功能</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
alert("用户名不能为空");
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
alert("用户密码不能为空");
return false;
}
//技术爱好
var flag = false; //是否有选中的技术爱好
var techs = document.getElementsByName("technology");
for(var x=0; x<techs.length; x++){
if(techs[x].checked){
flag = true;
}
}
if(!flag){
alert("技术爱好不能为空");
return false;
}
//所选城市
var city = document.getElementsByName("city")[0];
if(city.value == ""){
alert("所选城市不能为空");
return false;
}
//-------------------------------------
//实现自定义提交功能
//指定需要提交的表单
var formNode = document.getElementsByTagName("form")[0];
//指定数据提交的服务器地址
//属性: action 设置或获取表单内容要发送处理的 URL。
formNode.action = "success.html";
//提交数据
//方法 : submit 提交表单。
formNode.submit();
}
//自定义重置
function myReset(){
document.getElementsByName("username")[0].value = "";
document.getElementsByName("password")[0].value = "";
document.getElementsByName("sex")[0].checked = "checked";
var technologys = document.getElementsByName("technology");
for(var x=0; x<technologys.length; x++){
technologys[x].checked = false;
}
document.getElementsByName("city")[0].value ="";
}
</script>
</head>
<body>
<form method="get" action="" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名称</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>用户性别</td>
<td>
<input type="radio" name="sex" value="nan" checked="checked"/>男
<input type="radio" name="sex" value="nv" />女
</td>
</tr>
<tr>
<td>技术爱好</td>
<td>
<input type="checkbox" name="technology" value="java" checked="checked" />JAVA
<input type="checkbox" name="technology" value="android" />ANDROID
<input type="checkbox" name="technology" value="HTML" />HTML
<input type="checkbox" name="technology" value="IOS" />IOS
</td>
</tr>
<tr>
<td>所在城市</td>
<td>
<select name="city">
<option value="">--选择城市--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="提交" οnclick="validataForm()" />
<input type="button" value="重置" οnclick="myReset()"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ValidateForm(Span)
<!--
事件:
focus 使得元素得到焦点并执行由 onfocus 事件指定的代码。
onblur 在对象失去输入焦点时触发
-->
<html>
<head>
<title>JS通过Span标签提醒</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
username.focus();
//alert("用户名不能为空");
document.getElementById("username_span").innerHTML = "用户名不能为空";
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
password.focus();
//alert("用户密码不能为空");
document.getElementById("password_span").innerHTML = "用户密码不能为空";
return false;
}
}
//验证用户名
function checkUserName(node){
if(node.value == ""){
document.getElementById("username_span").innerHTML = "用户名不能为空";
} else {
document.getElementById("username_span").innerHTML = "";
}
}
//验证密码
function checkPassWord(node){
if(node.value == ""){
document.getElementById("password_span").innerHTML= "用户密码不能为空";
} else {
document.getElementById("password_span").innerHTML= "";
}
}
</script>
</head>
<body>
<form method="post" action="success.html" onSubmit="return validataForm()" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td width="30%">用户名称</td>
<td width="70%">
<input type="text" name="username" onBlur="checkUserName(this)" />
<span id="username_span" ></span>
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" onBlur="checkPassWord(this)" />
<span id="password_span" ></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ValidateForm(SpanColor)
<html>
<head>
<title>JS通过SpanColor标签提醒</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
span{
color:red;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
username.focus();
//alert("用户名不能为空");
//document.getElementById("username_span").innerHTML = "用户名不能为空";
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
password.focus();
//alert("用户密码不能为空");
//document.getElementById("password_span").innerHTML = "用户密码不能为空";
return false;
}
}
//验证用户名
function checkUserName(node){
if(node.value == ""){
document.getElementById("username_span").innerHTML = "用户名不能为空";
} else {
document.getElementById("username_span").innerHTML = "";
}
}
//验证密码
function checkPassWord(node){
if(node.value == ""){
document.getElementById("password_span").innerHTML= "用户密码不能为空";
} else {
document.getElementById("password_span").innerHTML= "";
}
}
</script>
</head>
<body>
<form method="post" action="success.html" onSubmit="return validataForm()" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td width="30%">用户名称</td>
<td width="70%">
<input type="text" name="username" onBlur="checkUserName(this)" />
<span id="username_span" >用户名不能为空</span>
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" onBlur="checkPassWord(this)" />
<span id="password_span" >用户密码不能为空</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ValidateForm(SpanDisplay)
<html>
<head>
<title>JS通过Span标签提醒 是否显示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
span{
color:red;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
username.focus();
//alert("用户名不能为空");
//document.getElementById("username_span").innerHTML = "用户名不能为空";
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
password.focus();
//alert("用户密码不能为空");
//document.getElementById("password_span").innerHTML = "用户密码不能为空";
return false;
}
}
//验证用户名
function checkUserName(node){
if(node.value == ""){
//显示
document.getElementById("username_span").style.display = "inline";//"block";
} else {
//隐藏
document.getElementById("username_span").style.display = "none";
}
}
//验证密码
function checkPassWord(node){
if(node.value == ""){
document.getElementById("password_span").style.display = "inline";//"block";
} else {
document.getElementById("password_span").style.display = "none";
}
}
</script>
</head>
<body>
<form method="post" action="success.html" onSubmit="return validataForm()" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td width="30%">用户名称</td>
<td width="70%">
<input type="text" name="username" onBlur="checkUserName(this)" />
<span id="username_span" >用户名不能为空</span>
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" onBlur="checkPassWord(this)" />
<span id="password_span" >用户密码不能为空</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ValidateForm(RegExp)
<html>
<head>
<title>通过正则表达式验证表单信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
table{
margin-left:50%;
position:relative ;
left:-300px;
}
span{
color:red;
}
</style>
<script type="text/javascript">
function validataForm(){
//验证表单信息
//return false;
//验证用户名
var username = document.getElementsByName("username")[0];
if(username.value == ""){
username.focus();
//alert("用户名不能为空");
//document.getElementById("username_span").innerHTML = "用户名不能为空";
return false;
}
//验证用户密码
var password = document.getElementsByName("password")[0];
if(password.value == ""){
password.focus();
//alert("用户密码不能为空");
//document.getElementById("password_span").innerHTML = "用户密码不能为空";
return false;
}
}
//验证用户名
function checkUserName(node){
/* 语法1
用户名必须为4位字母
*/
//定义规则
var reg = /^[a-z]{4}$/i;
//找到需要验证的数据
var value = node.value;
//验证
var arr = value.match( reg );
if(arr == null){
//显现
document.getElementById("username_span").style.display = "inline";
} else {
//隐藏
document.getElementById("username_span").style.display = "none";
}
}
//验证密码
function checkPassWord(node){
//定义规则
//var reg = /^\w{6,12}$/;
//re = new RegExp("规则",["标识"])
var reg = new RegExp("^\\w{6,12}$");
//找到需要验证的数据
var value = node.value;
//验证
var flag = reg.test( value );
if(flag){
//隐藏
document.getElementById("password_span").style.display = "none";
} else {
//显示
document.getElementById("password_span").style.display = "inline";
}
}
</script>
</head>
<!--
正则表表达式
语法 1
re = /规则/[标识]
语法 2
re = new RegExp("规则",["标识"])
标识:
g (全文查找出现的所有 pattern)
i (忽略大小写)
m (多行查找)
验证方法:
match 方法
使用正则表达式模式对字符串执行查找,并将包含查找的结果作为数组返回。
如果 match 方法没有找到匹配,返回 null
stringObj.match(rgExp)
exec 方法
用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。
如果 exec 方法没有找到匹配,则它返回 null
rgExp.exec(str)
test 方法
返回一个 Boolean 值,它指出在被查找的字符串中是否存在模式。
rgexp.test(str)
-->
<body>
<form method="post" action="success.html" onSubmit="return validataForm()" >
<table border="1" bordercolor="blue" cellspacing="0" cellpadding="10" width="600" >
<tbody>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td width="30%">用户名称</td>
<td width="70%">
<input type="text" name="username" onBlur="checkUserName(this)" />
<span id="username_span" >用户名必须为4位字母</span>
</td>
</tr>
<tr>
<td>用户密码</td>
<td>
<input type="password" name="password" onBlur="checkPassWord(this)" />
<span id="password_span" >用户密码长度6-12位之间</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
下面是一些网页中常用的重要正则表达式,不懂的同胞们可以参考参考。
正则表达式:regular expression
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。
方法 :
compile方法
编译一个正则表达式对象
exec方法
运行正则表达式匹配
test方法
测试正则达式匹配
toSource方法
返回一个对象的文字描述指定的对象;你可以使用这个值来建立一个新的对象。
toString方法
返回一个字符串描述指定的对象。
valueOf方法
返回指定对角的原始值。
正则表达式中的特殊字符:
字符 含意
\ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。
-或-
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。
^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa
+ 匹配前面元字符1次或多次,/ba+/将匹配ba,baa,baaa
? 匹配前面元字符0次或1次,/ba?/将匹配b,ba
(x) 匹配x保存x在名为$1...$9的变量中
x|y 匹配x或y
{n} 精确匹配n次
{n,} 匹配n次以上
{n,m} 匹配n-m次
[xyz] 字符集(character set),匹配这个集合中的任一一个字符(或元字符)
[^xyz] 不匹配这个集合中的任何一个字符
[\b] 匹配一个退格符
\b 匹配一个单词的边界
\B 匹配一个单词的非边界
\cX 这儿,X是一个控制符,/\cM/匹配Ctrl-M
\d 匹配一个数字字符,/\d/ = /[0-9]/
\D 匹配一个非数字字符,/\D/ = /[^0-9]/
\n 匹配一个换行符
\r 匹配一个回车符
\s 匹配一个空白字符,包括\n,\r,\f,\t,\v等
\S 匹配一个非空白字符,等于/[^\n\f\r\t\v]/
\t 匹配一个制表符
\v 匹配一个重直制表符
\w 匹配一个可以组成单词的字符(alphanumeric,这是我的意译,含数字),包括下划线,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9]
\W 匹配一个不可以组成单词的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。
创建一个ExgExp对象的两种方式:
1:构造函数 RegExp();
var pattern = new RegExp("s$");
2:正则表达式直接量 被定义为包含在一对斜杠(/)之间的字符 隐式构造
var pattern = /s$/;
举例:
/**
函数名称:isMobile
函数功能:判断输入字符串是不是符合规范的手机号码(包括159 不包括小灵通)
判断规范:以13|159开头
输入参数:需要测试的字符串
返回参数:是手机号码:true
不是手机号码:false
*/
function isMobile(s)
{
var patrn=/^13[0-9]{9,9}$|159[0-9]{8,8}$/;
if (!patrn.exec(s))
{
return false;
}
return true;
}
E-mail地址验证:
function test_email(strEmail) {
var myReg = /^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
if(myReg.test(strEmail)) return true;
return false;
}
常见匹配的正则表达式
/***********************************************************
//验证模板的正则表达式定义
var telPatten=/(\d{3}-|\d{4}-)?(\d{8}|\d{7})/; //国内电话
var mobilePatten=/^(130|131|132|133|134|135|136|137|138|139|159)\d{8}$/; //国内手机号码
var qqPatten=/^[1-9]*[1-9][0-9]*$/; //腾讯QQ
var emailPatten=/^[_a-z0-9]+@([_a-z0-9]+\.)+[a-z0-9]{2,3}$/; //email地址
var datePatten=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; //日期YYYY-MM-DD
var datetimePatten=/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2})$/; //日期时间型YYYY-MM-DD HH:MI
var timePatten=/^(\d{1,2}):(\d{1,2})$/; //时间型HH:MI
var chinesePatten=/[\u4e00-\u9fa5]/; //匹配中文串
var dbcharPatten=/[^\x00-\xff]/; //匹配双字节串
var blanklinePatten=/\n\s*\r/; //匹配空白项
//var htmlPatten=/<(\S*?)[^>]*>.*?</\1>|<.*? />/; //匹配HTML标记
var twoblankPatten=/^\s*|\s*$/; //匹配首尾空白字符
//var urlPatten=/[a-zA-z]+://[^\s]*/;//匹配网址URL
var postPatten=/[1-9]\d{5}(?!\d)/;//匹配中国邮政编码
var idcardPatten=/\d{15}|\d{18}/;//匹配身份证
var ipPatten=/\d+\.\d+\.\d+\.\d+/;//匹配ip地址:
var numstrPatten=/^[0-9]+$/; //全部是数字的字符串
var string1Patten=/^[A-Za-z]+$/; //由26个英文字母组成的字符串
var string2Patten=/^[A-Z]+$/; //由26个英文字母的大写组成的字符串
var string3Patten=/^[a-z]+$/; //由26个英文字母的小写组成的字符串
var string4Patten=/^[A-Za-z0-9]+$/; //由数字和26个英文字母组成的字符串
var string5Patten=/^[A-Za-z0-9_]+$/;//由数字、26个英文字母或者下划线组成的字符串
var string6Patten=/^\w+$/; //匹配由数字、26个英文字母或者下划线组成的字符串
var int1Patten=/^[1-9]\d*|0$/; //非负整数
var int2Patten=/^[1-9]\d*$/; //正整数
var int3Patten=/^-[1-9]\d*|0$/; //非正整数
var int4Patten=/^-[1-9]\d*$/; //负整数
var intPatten=/^-?[1-9]\d*$/; //整数
var float1Patten=/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$/; //非负浮点数
var float2Patten=/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/; //正浮点数
var float3Patten=/^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$/; //非正浮点数
var float4Patten=/^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$/; //负浮点数
var floatPatten=/^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/; //浮点数
var float5Patten=/^\d+(\.\d+)?$/; //浮点数或者整数
var float6Patten=/^-?\d+(\.\d+)?$/; //浮点数或者整数负数
*********************************************************************************/