day30_JQuery

回顾
1. bom对象
window对象
三种弹框
alert()
confirm()
prompt()
二种定时器
一次性:setTimout() --- 通过递归实现循环性
循环性:setInterval()
location对象
location.href="新地址"
location.reload()
2. dom对象【重点】
获取元素
getElementById();
querySelectorAll();
操作内容
innerText=纯文本
innerHTML=超文本
操作属性
js对象.属性名
操作样式
js对象.className=css的类选择器 可实现解耦
操作元素
innerHTML=创建新的子标签
3. 正则表达式
表单校验
步骤
let reg=/正则规则/;
reg.test(用户输入的字符串);
合法:true
不合法:false
4. 综合案例
今日内容
1. 什么框架?
2. jquery基础语法
js与jq区别【重点】
3. jquery选择器
4. jq的dom操作
5. jq的事件
6. 综合案例
JQuery概述
概述
-
概述
jQuery是一个优秀的javascript的轻量级框架之一,封装了dom操作、事件、页面动画、异步操
作等功能。
特别值得一提的是基于jquery的插件非常丰富,大多数前端业务场景都有其封装好的工具框架。 -
JQuery的下载和版本
-
jQuery-x.x.x.js为开发版本(有缩进和文档注释, 方便阅读)
-
jQuery-x.x.x.min.js为生产版本(体积小, 方便传输)
-
自定义JS框架
框架 是完成某种功能的半成品, 抽取重复繁杂的代码, 提供简介强大的方法实现
Jquery基本语法
Jquery的环境引入
<!--引入jquery脚本库-->
<script src="../js/jquery-1.11.3.js"></script>
Jquery和dom对象的区别
<!--
jquery对象与dom对象定义
dom对象:使用js形式获取的元素对象 例如 document.querySelector() 或
document.querySelectorAll()
jquery对象: 使用 $()构造获得的元素对象 例如 $(selector)
使用注意:
jquery对象只能使用jquery对象的属性和方法,不能使用dom对象的属性和方法
dom对象只能使用dom对象的属性和方法,不能使用jquery对象的属性和方法
jquery对象与dom对象转换:
dom对象 可以使用$构造 例如 $(dom对象)
jquery对象 可以使用数组取索引值的形式 例如 $[index] 或 $.get(index)
-->
Jquery对象与js对象的相互转换
js --> jq
$(js对象) 或者 jQuery(js对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<script>
// 通过js方式修改文本内容
let myDiv = document.getElementById("myDiv");
/* myDiv = "使用js方式修改内容";*/
// 通过jq方式修改文本内容
let $myDiv = $("#myDiv")
// $myDiv.html("使用jq方式修改的文本内容");
// js对象和jq对象的:属性和方法不同通用
$(myDiv).html("js转为jq对象");
console.log($myDiv.length);
$myDiv[0].innerHTML = "jq转为js对象";
</script>
页面加载时间
-
js
window.onload = function () { alert("js加载事件1"); };
-
jq
//jq页面加载事件 $(function () { alert("jq加载事件1") }); $(function () { alert("jq加载事件2") });
-
区别
js: 只能定义一次, 如果定义多次, 会被覆盖
jq: 可以定义多次
Jquery选择器
基本选择器
-
获取标签的jq对象
$("标签名")
-
获取class的jq对象
$(.class)
-
获取id的jq对象
$(#ID)
层级关系选择器
<script >
// E,F 并列 特点: 逗号
console.log($("p,span").text());//获取所有的p,span的文本
// E F 后代 特点: 空格
console.log($("div span").text());//获取div的后代span的文本
</script>
属性选择器
-
属性选择器
$("input[type ='text']")
-
复合属性选择器
$("input[type='text'][name='nickname']")
<body>
<input type="text" name="username" value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
// 1.获取type='text'的input标签
console.log($("input[type ='text']"));
// 2.获取type='text' 且 name="nickname" 的input标签
console.log($("input[type='text'][name='nickname']"));
</script>
过滤选择器
-
首元素选择器
:first
-
尾元素选择器
:last
-
偶数选择器
:even
-
奇数选择器
:odd
-
指定索引选择器
:eq()
<script>
// 1.获取第一个元素
console.log($("li:first").text());
//最后一个元素
console.log($("li:last").text());
// 2.获取偶数索引元素
console.log($("li:even").text());
//奇数索引元素
console.log($("li:odd").text());
// 3.获取指定索引2的元素
console.log($("li:eq(2)").text());
</script>
jq对象遍历
语法:
jq.each(function(index, element)){
}
<body>
<!--
jquery对象的遍历
$.each() 用法示例
-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
let lis = document.querySelectorAll("li");
//普通for
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
console.log("-----------------------");
//增强for
for (let li of lis) {
console.log(li);
}
console.log("-----------------------");
//jq的for循环
/* $("li").each(function (index, element) {
console.log(index);
console.log(element);
console.log(element.innerHTML);//element为js对象
console.log($(element).html());//升级为jq对象
});*/
console.log("-----------------------");
$("li").each(function () {
console.log(this);
});
</script>
Jquery的dom操作
Jq 操作内容
- .text(): 获取对象的文本
- .html(): 获取对象包含html标签的内容
<body>
<div id="myDiv"><p>天王盖地虎</p></div>
<script>
// 1.text()操作内容
console.log($("#myDiv").text());//获取纯文本
$("#myDiv").text("<h1>设置文本</h1>");//设置纯文本,这里会显示h1
// 2.html()操作内容
console.log($("#myDiv").html());//获取包含p标签的html内容
$("#myDiv").html("<h1>设置超文本</h1>")//设置超文本, 会展示h1效果
$("#myDiv").html($("#myDiv").html()+"<h1>追加超文本</h1>")//追加超文本, 会展示h1效果
</script>
</body>
Jq操作属性
-
.attr("属性名")
获取/设置jq对象的属性removeAttr("属性名")
删除属性相当于:
js对象.setAttribute() / js对象.getAttribute()
-
.val()
是jq中 对attr("value")的简化,相当于:
js对象.value
-
.prop()
获取/设置属性(如果是判断属性是否存在推荐用这个,别用attr())attr()方法中, 如果是对checked属性进行获取的话, 选中的返回checked 未选择
prop()更适合于 如 checked, selected 这类属性进行获取,
jq操作属性最基本的是 attr() , 对value属性进行优化, 可以使用 val() 对布尔类型属性进行优化使用了 prop()
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取文本框value属性
//value的方式一
console.log($("#username").attr("value"));//获取
console.log($("#username").attr("value","新属性值"));//设置
// console.log($("#username").removeAttr("value"));//删除
//value的方式二
console.log($("#username").val());
console.log($("#username").val("value的jq赋值方式"));//新增/修改
// 2.获取爱好的checked属性
//方式一 使用 attr()
console.log($("#hobby").attr("checked"));
//方式二 使用prop() 获取
console.log($("#hobby").prop("checked"));
</script>
Jq操作样式
-
直接修改jq对象样式属性
jq对象.css() css(样式名) 获取 css(样式名, 样式值) 设置 支持css语法 如 font-size
-
添加/删除jq对象样式
jq对线.addClass() jq对象.removeClass()
-
切换jq对象样式
jq对象.toggleClass() 这个方法是 addClass() removeClass()这两个的封装判断
<head>
<meta charset="UTF-8">
<title>11-dom操作样式</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
#p1{ background-color: red;}
.mp {
color: green
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle">切换</button>class样式 </p>
<script>
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
let $p4 = $('#p4');//获取p4
// 0. 获取第一个标签的背景色
console.log($p1.css("background-color"));
// 1. 设置一个css样式
$p1.css("background-color","gray");
// 2. 批量设置css样式
$p2.css({"border":"1px solid red","font-size":"20px"});
// 3. 通过class设置样式
$p3.addClass("mp mpp");
// $p3.removeClass("mpp");
// 4. toggleClass() 切换一个class
$("#toggle").click(function () {
$p4.toggleClass("mp mpp");
});
</script>
</body>
Jq操作元素
- $(标签) 创建一个标签
- $.prepend() 在父标签中将子标签放在第一个位置
- $.append() 在父标签中将子标签放在最后一个位置
- $.empty() 清空子元素
- $.remove() 删除
<script>
let $star = $('#star'); // 无序列表
// 1.前面添加马尔扎哈
$star.prepend($("<li>马尔扎哈</li>"));
// 2.后面添加萨瓦迪卡
$star.append($("<li>马尔扎哈</li>"));
// 3.移出所有列表项
$star.empty();
// 4.删除无序列表
// $star.remove();
</script>
Jquery 事件绑定
jQuery的事件与js的事件的功能和作用一样,只是在使用语法上稍微有些差异。
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-jq事件绑定</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
<script>
// js事件绑定
document.getElementById('jsBtn').onclick=function () {
alert('js事件绑定')
}
// jq事件绑定
$('#jqBtn').click(function () {
alert('jq事件绑定')
})
</script>
</body>
</html>
常见事件
1. 点击事件:
1. click():单击事件
2. dblclick():双击事件
2. 焦点事件
1. blur():失去焦点
2. focus():元素获得焦点。
3. 鼠标事件:
1. mousedown() 鼠标按钮被按下。
2. mouseup() 鼠标按键被松开。
3. mousemove() 鼠标被移动。
4. mouseover() 鼠标移到某元素之上。
5. mouseout() 鼠标从某元素移开。
4. 键盘事件:
1. keydown() 某个键盘按键被按下。
2. keyup() 某个键盘按键被松开。
3. keypress() 某个键盘按键被按下并松开。
5. 改变事件
1. change() 域的内容被改变。
6. 表单事件:
1. submit() 提交按钮被点击。
案例
隔行换色
<script>
// 奇数行
$('tr:even').css('background-color','lightgray');
// 偶数行
$('tr:odd').css('background-color','skyblue');
// 课下作业 实现解耦合...
</script>
商品全选
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-商品全选</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
// 全选
$('#btn1').click(function () {
$('input[type="checkbox"]').prop('checked',true);
})
// 反选,必须遍历才能实现
$('#btn2').click(function () {
$('input[type="checkbox"]').each(function (index,element) { // 注意:element
// js方式 推荐
// element.checked = ! element.checked;
// jq方式 比较麻烦 了解
$(element).prop('checked',!$(element).prop('checked'))
})
})
let str = '哈哈'+1+"呵呵";
let str = '<p align="center"></p>'
</script>
</body>
</html>
QQ表情
<script>
// 给所有的图片绑定点击事件
$('.emoji img').click(function () {
// this 表示当前 img标签
console.log(this);
$('#word').append($(this).clone())
})
</script>
老师下午总结
1. Jquery
概述
引入Jquery库文件
<script src="jquery文件地址"></script>
页面加载完成后执行脚本: $(匿名函数);
$(function(){
//代码;
});
jquery对象与dom对象:
区别:
jquery对象只能使用jquery对象的属性和方法,不能使用dom对象的属性和方法
dom对象只能使用dom对象的属性和方法,不能使用jquery对象的属性和方法
转换:
dom对象转jquery对象 : $(dom对象)
jquery对象转dom对象: $[index] 或 $.get(index)
选择器
id选择器
根据给定的ID匹配一个元素。
$("#id值")
标签选择器
根据给定的元素名匹配所有元素
$("标签")
类选择器
根据给定的类属性值匹配元素。
$(".class属性值")
属性选择器
$("[attr]") : 获取指定属性的所以元素。
$("[attr='value']") : 获取指定属性名等于属性值的所以元素
表单选择器
$(":input") : 匹配所有input元素
$(":text") : 匹配所有text文本框
$(":checkbox") : 匹配所有复选框
$(":checked") : 匹配复选框和单选框中所有被选中的元素
$(":checkbox:checked") : 匹配所有选中的复选框
过滤选择器
$(":first") : 获取第一个元素
$(":last") : 获取最后一个元素
$(":odd") : 获取索引值为奇数的元素
$(":even") : 获取索引值为偶数的元素
$(":eq(index)") : 根据给定索引index,获取一个元素
并列选择器
找到所有和任意选择器匹配的元素。
$("选择器1, 选择器2, 选择器N")
层级选择器
找到父标签下的所有子标签,包括子孙标签。
$("选择器 后代")
遍历
1. jq对象.each()方法:
each(function(i,e){})
each((i,e)=>{})
i : 索引值
e : dom对象
2. fori
for(let i =0; i<jq对象.length; i++){
let dom = jq对象[i]; //得到每一个dom对象
}
3. forof $.toArray()把jquery对象转为dom对象数组
for(let e of jq对象.toArray()){ //toArray()把jquery对象转为dom对象数组
//每个e代表遍历出来的一个dom对象
}
操作内容
1. text() 获取或设置标签的文本 //相当于innerText
2. html() 获取或设置标签的html //相当于innerHTML
操作属性
1. val() 获取或修改表单控件的value值,等于dom.value
2. prop() 获取或修改原生属性值,等于dom.properties
3. attr() 获取或修改自定义属性值 等于dom.setAttribute(), dom.getAttribute()
建议:
具有true和false值的属性,如checked,selected或disabled使用 prop()
其他的使用attr()
操作样式
1. css(样式名) 获取一个样式值
css(样式名,样式值) 设置一个样式
css({样式名:样式值,样式名:样式值}) 批量设置样式
2. addClass() 为元素添加class样式
3. removeClass() 移除一个class样式
4. toggleClass() 切换样式,如果存在就删除,不存在就添加。
操作元素
1. $("标签") 创建一个标签
2. prepend(jq元素对象) 在内部前面插入元素
3. append(jq元素对象) 在内部后面追加元素
4. empty() 删除元素下的所有子元素
5. remove() 删除所有匹配的元素
事件绑定
1. 事件名(函数)
jq对象.click(function(){
//this表示dom对象
});
jquery事件与dom事件写法区别:
jquery 都不要加on 例如 $.click(函数)
dom 都需要加on 例如 dom.onclick = 函数
2. on("事件名",函数)
jq对象.on("click",function(){
//this表示dom对象
});
3. off("事件名")
解除event事件绑定
2. 案例练习
练习1
需求:
点击按钮,实现浏览器背景的护眼模式和正常模式的切换。
说明:
正常模式下,按钮显示 “护眼模式”。
当点击后,修改body标签的class属性,切换为night值,按钮显示 "正常模式"
素材页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-1.11.1.js"></script>
<!--护眼模式-->
<style>
.night{
background-color: moccasin;
}
</style>
</head>
<body>
<button id="btn">护眼模式</button>
</body>
<script>
</script>
</html>
参考答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-1.11.1.js"></script>
<!--护眼模式-->
<style>
.night{
background-color: moccasin;
}
</style>
</head>
<body>
<button id="btn" onclick="changeBody()">护眼模式</button>
</body>
<script>
function changeBody() {
$("body").toggleClass("night");
let btnText = $("#btn").text();
if(btnText=="护眼模式"){
$("#btn").text("正常模式");
}else{
$("#btn").text("护眼模式");
}
}
</script>
</html>
练习2
实现一个抽奖功能。
要求:
点击开始按钮后,开始按钮禁用,停止按钮取消禁用,小图片实现快速切换显示。
点击停止按钮后,停止按钮禁用,开始按钮取消禁用,小图片停止切换,将小图片在大图片位置显示。
小图片实现快速切换显示。
素材页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.png"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="点击开始"/>
<input id="btnStop" type="button" value="点击停止"/ disabled>
<script type="text/javascript">
</script>
</body>
</html>
参考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖程序</title>
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#small {
border: 1px solid blueviolet;
width: 75px;
height: 75px;
margin-bottom: 20px;
}
#smallPhoto {
width: 75px;
height: 75px;
}
#big {
border: 2px solid orangered;
width: 500px;
height: 500px;
position: absolute;
left: 300px;
top: 10px
}
#bigPhoto {
width: 500px;
height: 500px;
}
#btnStart {
width: 100px;
height: 100px;
font-size: 22px;
}
#btnStop {
width: 100px;
height: 100px;
font-size: 22px;
}
</style>
</head>
<body>
<!-- 小像框 -->
<div id="small">
<img id="smallPhoto" src="../img/man00.jpg"/>
</div>
<!-- 大像框 -->
<div id="big">
<img id="bigPhoto" src="../img/begin.jpg" />
</div>
<input id="btnStart" type="button" value="开始" onclick="gameStart()">
<input id="btnStop" type="button" value="停止" disabled onclick="gameOver()">
<script type="text/javascript">
//初始化抽奖的名单(图片地址)
let imgs = [
"../img/man00.jpg",
"../img/man01.jpg",
"../img/man02.jpg",
"../img/man03.jpg",
"../img/man04.jpg",
"../img/man05.jpg",
"../img/man06.jpg",
];
//定时器序号
let counter = null;
//点击开始
function gameStart() {
//开始按钮禁用
$("#btnStart").prop("disabled",true);
//停止按钮可用
$("#btnStop").prop("disabled",false);
//定义计数变量
let num = 0;
//使用定时器实现小图框快速切换图片
counter = setInterval(function () {
//通过取余,循环得到数组得到索引
let index = num%imgs.length;
//修改小图框中img的src即可
$("#smallPhoto").attr("src",imgs[index]);
//计数变量自增
num++;
},20);
}
//点击结束
function gameOver() {
//禁用结束按钮
$("#btnStop").prop("disabled",true);
//取消开始按钮的禁用
$("#btnStart").prop("disabled",false);
//停止小图框的抽奖(停止定时器)
clearInterval(counter);
//将计算变量重置为0
num = 0;
//获取小图框图片地址
let imgUrl = $("#smallPhoto").attr("src");
//将抽奖结果显示在大图框中,并隐藏起来
$("#bigPhoto").attr("src",imgUrl).hide();
//将图片进行淡出
$("#bigPhoto").fadeIn(2000);
}
</script>
</body>
</html>
3. 扩展:表单校验插件
JQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。
导入文件
Jquery validate 插件依赖Jquery库,使用前需要先导入jquery的js文件,再导入jquery.validate.js插件和中文提示信息文件messages_zh.js。
导入文件:
<!--jquery文件-->
<script src="../js/jquery-1.11.1.min.js"></script>
<!--jquery validate表单校验插件-->
<script src="../js/jquery.validate.js"></script>
<!--中文提示信息文件-->
<script src="../js/messages_zh.js"></script>
开启表单校验
$("#表单id").validate({
rules : {
需要校验的表单元素name属性值 : {
//配置json格式的校验规则
}
},
messages : {
需要校验的表单元素name属性值 : {
//配置json格式的校验提示信息
}
}
});
通过jquery的选择器获得表单对象,调用validate()方法进行校验。
validate方法里面传入json格式的校验参数。
属性说明:
rules:{} 校验规则,将需要校验的表单元素在rules里面添加校验规则
messages:{} 错误提示信息,如果校验失败,在messages里面可以定制提示信息。
该属性不是必须的,不加时使用默认的提示信息。
常用校验规则
序号 | 规则 | 描述 |
---|---|---|
1 | required:true | 必须输入的字段。 |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 |
3 | email:true | 必须输入正确格式的电子邮件。 |
4 | url:true | 必须输入正确格式的网址。 |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 |
6 | dateISO:true | 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。 |
7 | number:true | 必须输入合法的数字(负数,小数)。 |
8 | digits:true | 必须输入整数。 |
9 | creditcard: | 必须输入合法的信用卡号。 |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 |
16 | max:5 | 输入值不能大于 5。 |
17 | min:10 | 输入值不能小于 10。 |
校验案例
HTML素材页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单校验插件</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn {
color: red;
font-size: 12px;
display: none;
}
</style>
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" id="myForm">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/></td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="pwd1" type="password" name="pwd1" size="50"/></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="pwd2" type="password" name="pwd2" size="50"/></td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="email" type="text" name="email" size="50"/></td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="50"/></td>
</tr>
<tr>
<td align="right">电话号码</td>
<td colspan="2"><input id="phone" type="text" name="phone" size="50"/></td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
进行表单校验
需求:
用户名是必填项
密码必填,长度在6-12位之间
确认密码必须和密码一致
邮箱必填,对格式进行校验
电话号码必填,必须是11位数字
网友评论