<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script language="javascript" >
function check(){
//1.检测用户名
var username=trim(document.getElementById("us").value);
if(username.length<6 || username.length>15){
alert("你输入的用户名有误,用户名必须是有6到15为有效字符组成");
document.getElementById("us").focus();
document.getElementById("us").select();
return false;
}
//2.对用户密码进行验证
var pw1=document.getElementById("pw1").value;
var pw2=document.getElementById("pw2").value;
if(pw1.length!=6){
alert("你输入的密码必须为6位有效字符");
return false;
}
if(pw1!=pw2){
alert("你输入输入的两次密码必须保持一致");
return false;
}
//3.对单选按钮的限制,要求用户必须选择一个性别
var sexs=document.getElementsByName("sex");
var flag=false;
for(var i=0;i<sexs.length;i++){
if(sexs[i].checked){
flag=true;
break;
}
}
if(!flag){
alert("请至少选择一个性别");
}
//4.对复选框的限制
var ins=document.getElementsByName("in");
var flag=false;
for(var i=0;i<sexs.length;i++){
if(ins[i].checked){
flag=true;
break;
}
}
if(!flag){
alert("请至少选择一个兴趣爱好");
}
//5.对用户所在城市进行限制
var area=document.getElementById("area").value;
if(area==""){
alert("请选择所在地区");
document.getElementById("area").focus();
return false;
}
//document.getElementById("area").options; //option组成的数组
// alert(document.getElementById("desc").value.length);
//6.对文本域的限制
var text=document.getElementById("text").value;
//alert(text);
if(text.length<4){
alert("请输入内容")
return false;
}
return false;
}
function trim(s){
s=s.replace(/^\s+/,""); //以非空字符开头
s=s.replace(/\s+$/,"");//以非空字符结束
return s
}
</script>
</head>
<body>
<form action="?" method="post" onsubmit="return check()" >
<table border="1" cellspacing="0" bordercolor="#0000FF" width = "80%" align="center" height="60%">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="us"> </td>
<td>文本框</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" id="pw1" > </td>
<td>密码文本框</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="password" id="pw2" > </td>
<td>密码文本框</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" >男 <input type="radio" name="sex" >女 </td>
<td>单选按钮</td>
</tr>
<td>爱好</td>
<td><input type="checkbox" name="in" >篮球 <input type="checkbox" name="in" >上网
<input type="checkbox" name="in" >玩 <input type="checkbox" name="in" >交友聊天
<input type="checkbox" name="in" >旅游</td>
<td>复选框</td>
</tr>
<tr>
<td>来自城市</td>
<td>
<select name="area" id="area">
<option value="">请选择城市</option>
<option value="hg">黄冈</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select></td>
<td>下拉列表</td>
</tr>
<td>上传照片</td>
<td><input type="file" name="upload" > </td>
<td>上传文件框</td>
</tr>
<td>自我介绍</td>
<td>
<textarea cols="34" rows="5" name="text" id="text"></textarea>
</td>
<td>文本域</td>
</tr>
<tr>
<td>按钮</td>
<td><input type="submit" name="submit" value="提交" > <input type="submit" name="reset" value="重置" > </td>
<td>按钮框</td>
</tr>
</table>
</form >
</body>
</html>
分享到:
相关推荐
代码是从一个论坛找到的,程序简单易懂,现在不用分共享给需要的人
用js监控文本框的输入字数。 可实时的显示还可以输入多少字
asp前台图片限制显示大小 将文件嵌入页面,通过传参数的方式调用函数来制定需要显示图片的大小
js编写的上传附件,可限制上传图片数量,上传的图片大小
Juery前台开发中所用验证框架,一般用于JS校验的长度限制,纯数字限制,Email格式限制等等
支持部分HTML、JavaScript、jsp前台等运用只能输入数字、手机格式、身份证号码格式、合计等等代码。
2)前台处理: 也就是利用Javascript获取该图片大小。 显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。 功能解析: 在这里我只介绍...
个人空间的开发,包括前台和后台两部分,前台采用H5+JavaScript+ajax编写,后台使用Java编写(没有使用框架),代码比较简洁,界面因为时间限制没有美化太多,不过用来练手js+ajax和后台的交互
前台实现了基本的论坛操作(登录,注册,轮播图,各个板块下的帖子显示,用户信息查看和修改,发帖,点赞,评论等功能),后台是CMS管理系统 主要实现了管理人员的权限分配和限制,个人信息查看和修改,前台板块管理...
2 前台显示flash有相当大的弹性,所以对文字多少没有苛刻的限制。 3 前台显示flash可以通过其中的翻页来查看所有开放的投票项目。4 强大的后台管理功能。5 前台显示flash调用非常简单,只需要调用一个js文件即可。6 ...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
vi: 提交前javascript会对cronExpression进行严格的规则验证 vii: 使用javascript正则表达式实现各定时分类的匹配展示 viii: 强兼容性,集成时能与其它css样式文件兼容,尽量把schedule.html内部样式表中的样式放在...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上,流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件...
!... <head> <... charset=utf-8″>...JS控制非法字符的输入</title> </head> <body> <form> 这里不允许输入如下字符:(像!@#$%^&*等) <textarea rows=”2″ cols=”20″
2.用户 用户登录系统后可以查看景点信息、美食信息、特产信息、酒店信息、交通信息、公告信息、留言反馈并且可以修改密码、...设计这个系统可以提高景区的成交率,让用户可以随时随地、不受限制的进行查看景点信息。
本系统后台程序基于PHP5.3.6+MYSQL5.1,前台程序基于HTML+CSS3+javascript+JQUERY。 本系统的特点: 1、免费下载、建立和使用,不做任何功能限制和使用时长限制。 2、BS架构,网络版 ,方便分店使用,不用单独安装...
网上书店的建设实现了对商业零售企业提供信息化管理。建立了企业对消费者(B2C)的网络销售系统。着重论述了系统功能与实现,数据流程及存储,包括...本系统唯一不足之处在受网上银行的限制,无法完善在线付费系统。
本系统后台程序基于PHP5.3.6+MYSQL5.1,前台程序基于HTML+CSS3+javascript+JQUERY。 本系统的特点: 1、免费下载、建立和使用,不做任何功能限制和使用时长限制。 2、BS架构,网络版 ,方便分店使用,不用单独安装...