js表单验证自我总结
2014-04-08 16:37
274 查看
[html]
< html>
< title></title>
<head>
<script language = "javascript">
function cancel(){
document.getElementById("Form").reset();
}
function check(){
//验证用户名
var username = document.getElementById("username");
if(username.value.length==0){
alert("用户名不能为空！");
username.focus();
return false;
}
if(username.value.length<6){
alert("用户名长度不能低于6位！");
username.value = "";
username.focus();
return false;
}
//验证密码，确认密码
var pass = document.getElementById("password");
var qrpass = document.getElementById("qrpassword");
if(pass.value.length==0){
alert("密码不能为空！");
pass.focus();
return false;
}
if(pass.value.length<6||pass.value.length>15){
alert("密码的长度为6-15位！");
pass.value = "";
pass.focus();
return false;
}else if(pass.value!=qrpass.value){
alert("两次密码输入不一致！");
qrpass.value = "";
qrpass.focus();
return false;
}
//验证身份证号
var idcard = document.getElementById("idcard");
if(idcard.value.length==0){
alert("请输入你的身份证号码!");
idcard.focus();
return false;
}
var card = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
if(!card.test(idcard.value)){
alert("你输入的身份证号码不正确，请重新输入！");
idcard.value="";
idcard.focus();
return false;
}
//验证性别
var sex = document.getElementsByName("sex");
var boo = true;
for(var i = 0;i<sex.length;i++){
if(sex[i].checked==true){
boo = false;
break;
}
}
if(boo){
alert("请选择你的性别！");
return false;
}
//验证出生日期
var data = document.getElementById("birthday");
if(data.value.length==0){
alert("请输入您的出生日期！");
pass.focus();
return false;
}
//YYYY-MM-DD || YYYY/MM/DD 的日期格式
var a=/^(d{4})(-|/)(d{1,2})2(d{1,2})$/
if(!a.test(data.value)){
alert("日期格式不正确！nn请输入YYYY-MM-DD或者YYYY/MM/DD的格式！");
return false;
}
//验证籍贯
var slt=document.getElementById("region");
if(slt.value=="0"){
alert("请选择你的籍贯！");
return false;
}
//验证爱好
var flag = true;
var aa = document.getElementsByName("hobby");
for(i = 0;i<aa.length;i++){
if(aa[i].checked==true){
flag = false;
break;
}
}
if(flag){
alert("请选择你的爱好！");
return false;
}
//验证邮箱
var objName = document.getElementById("email");
var pattern = /^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{1,10}[.](com|cn|net)$/;
if(objName.value==0){
alert("请输入您的邮箱！");
objName.focus();
return false;
}
if (!pattern.test(objName.value)) {
alert("邮箱格式不正确，请重新输入!");
objName.value="";
objName.focus();
return false;
}
//验证手机号码的
var tel = document.getElementById("tel");
var pattern= /^1[358]d{9}$/
if(tel.value.length==0){
alert("请输入你的手机号码！");
tel.focus();
return false;
}
if(!pattern.test(tel.value)) {
alert("你输入的手机号码无效，请重新输入！");
tel.value="";
tel.focus();
return false;
}
//验证自我介绍
var intro = document.getElementById("intro");
if(intro.value.length==0){
alert("自我介绍不能为空！");
return false;
}else if(intro.value.length<100){
alert("自我介绍字数不能低于100字！");
return false;
}
}
function checknoAll(){
var all = document.getElementsByName("all");
var no = document.getElementsByName("no");
if(no[0].checked==true){
all[0].checked=false;
var all = document.getElementsByName("hobby");
for(i = 0;i<all.length;i++){
if(all[i].checked==true){
all[i].checked=false;
}else if(all[i].checked==false){
all[i].checked=true;
}
}
}
}
function checkAll(){
var all = document.getElementsByName("all");
var no = document.getElementsByName("no");
if(all[0].checked==true){
no[0].checked=false;
var all = document.getElementsByName("hobby");
for(i = 0;i<all.length;i++){
if(!all[i].checked==true){
all[i].checked=true;
}
}
}
}
< /script>
</head>
< body>
<form action = "" method = "post" onsubmit = "return check();" id = "Form">
<table border = "1" bordercolor = "green" cellspacing = "1" cellpadding = "1" align = "left" width = "500">
<tr>
<td colspan = "2" align = "center"><font size = "5" color = "green"><b>用户注册</b></font></td>
</tr>
<tr>
< td align = "right">用户名：</td><td><input type = "text" id = "username" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">密 码：</td><td><input type = "password" id = "password" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">确认密码：</td><td><input type = "password" id = "qrpassword" style = "width:150px;height:20px" onpaste="return false"/> <font color = "red">警告：</font>禁止粘贴</td>
</tr>
<tr>
< td align = "right">身份证号：</td><td><input type = "text" id = "idcard" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">性 别：</td><td>男<input type = "radio" id = "sex" name = "sex" value = "boy"/>女<input type = "radio" name = "sex" id = "sex" value = "girl"/></td>
</tr>
<tr>
< td align = "right">出生日期：</td><td><input type = "text" id = "birthday" style = "width:150px;height:20px"/> <font color = "red">YYYY-MM-DD或者YYYY/MM/DD</font></td>
</tr>
<tr>
< td align = "right">籍 贯：</td><td><select id = "region">
< option value = "0">--请选择籍贯--</option>
< option value = "1">河南省郑州市</option>
< option value = "2">河南省信阳市</option>
< option value = "3">北京市海淀区</option>
< option value = "4">辽宁省大连市</option>
< option value = "5">广东省深圳市</option>
< /select>
< /td>
< /tr>
< tr>
< td align = "right">爱 好：</td><td><input type = "checkbox" id = "hobby" value = "music"/>音乐
<input type = "checkbox" id = "hobby" name = " hobby" value = "basketball"/>篮球
<input type = "checkbox" id = "hobby" name = " hobby" value = "visitor"/>旅游
<input type = "checkbox" id = "hobby" name = " hobby" value = "sleep"/>睡觉
<font color = "red">*</font>
< input type = "checkbox" id = "all" name = " all" onclick = "checkAll()"/>全选
<input type = "checkbox" id = "no" name = " bo" onclick = "checknoAll()"/>反选</td>
</tr>
<tr>
< td align = "right">邮 箱：</td><td><input type = "text" id = "email" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">手机号码：</td><td><input type = "text" id = "tel" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">自我介绍：</td><td><textarea id = "intro" style = "width:150px;height:50px"></textarea></td>
</tr>
<tr>
<td colspan = "2" align = "right">
<input type = "submit" value = " 提交注册信息 " /> <input type = "reset" onclick = "cancel()" value = " 全部清空 "/>
</td>
</table>
</form>
< /body>
< /html>
< html>
< title></title>
<head>
<script language = "javascript">
function cancel(){
document.getElementById("Form").reset();
}
function check(){
//验证用户名
var username = document.getElementById("username");
if(username.value.length==0){
alert("用户名不能为空！");
username.focus();
return false;
}
if(username.value.length<6){
alert("用户名长度不能低于6位！");
username.value = "";
username.focus();
return false;
}
//验证密码，确认密码
var pass = document.getElementById("password");
var qrpass = document.getElementById("qrpassword");
if(pass.value.length==0){
alert("密码不能为空！");
pass.focus();
return false;
}
if(pass.value.length<6||pass.value.length>15){
alert("密码的长度为6-15位！");
pass.value = "";
pass.focus();
return false;
}else if(pass.value!=qrpass.value){
alert("两次密码输入不一致！");
qrpass.value = "";
qrpass.focus();
return false;
}
//验证身份证号
var idcard = document.getElementById("idcard");
if(idcard.value.length==0){
alert("请输入你的身份证号码!");
idcard.focus();
return false;
}
var card = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
if(!card.test(idcard.value)){
alert("你输入的身份证号码不正确，请重新输入！");
idcard.value="";
idcard.focus();
return false;
}
//验证性别
var sex = document.getElementsByName("sex");
var boo = true;
for(var i = 0;i<sex.length;i++){
if(sex[i].checked==true){
boo = false;
break;
}
}
if(boo){
alert("请选择你的性别！");
return false;
}
//验证出生日期
var data = document.getElementById("birthday");
if(data.value.length==0){
alert("请输入您的出生日期！");
pass.focus();
return false;
}
//YYYY-MM-DD || YYYY/MM/DD 的日期格式
var a=/^(d{4})(-|/)(d{1,2})2(d{1,2})$/
if(!a.test(data.value)){
alert("日期格式不正确！nn请输入YYYY-MM-DD或者YYYY/MM/DD的格式！");
return false;
}
//验证籍贯
var slt=document.getElementById("region");
if(slt.value=="0"){
alert("请选择你的籍贯！");
return false;
}
//验证爱好
var flag = true;
var aa = document.getElementsByName("hobby");
for(i = 0;i<aa.length;i++){
if(aa[i].checked==true){
flag = false;
break;
}
}
if(flag){
alert("请选择你的爱好！");
return false;
}
//验证邮箱
var objName = document.getElementById("email");
var pattern = /^[a-zA-Z0-9]{1,}@[a-zA-Z0-9]{1,10}[.](com|cn|net)$/;
if(objName.value==0){
alert("请输入您的邮箱！");
objName.focus();
return false;
}
if (!pattern.test(objName.value)) {
alert("邮箱格式不正确，请重新输入!");
objName.value="";
objName.focus();
return false;
}
//验证手机号码的
var tel = document.getElementById("tel");
var pattern= /^1[358]d{9}$/
if(tel.value.length==0){
alert("请输入你的手机号码！");
tel.focus();
return false;
}
if(!pattern.test(tel.value)) {
alert("你输入的手机号码无效，请重新输入！");
tel.value="";
tel.focus();
return false;
}
//验证自我介绍
var intro = document.getElementById("intro");
if(intro.value.length==0){
alert("自我介绍不能为空！");
return false;
}else if(intro.value.length<100){
alert("自我介绍字数不能低于100字！");
return false;
}
}
function checknoAll(){
var all = document.getElementsByName("all");
var no = document.getElementsByName("no");
if(no[0].checked==true){
all[0].checked=false;
var all = document.getElementsByName("hobby");
for(i = 0;i<all.length;i++){
if(all[i].checked==true){
all[i].checked=false;
}else if(all[i].checked==false){
all[i].checked=true;
}
}
}
}
function checkAll(){
var all = document.getElementsByName("all");
var no = document.getElementsByName("no");
if(all[0].checked==true){
no[0].checked=false;
var all = document.getElementsByName("hobby");
for(i = 0;i<all.length;i++){
if(!all[i].checked==true){
all[i].checked=true;
}
}
}
}
< /script>
</head>
< body>
<form action = "" method = "post" onsubmit = "return check();" id = "Form">
<table border = "1" bordercolor = "green" cellspacing = "1" cellpadding = "1" align = "left" width = "500">
<tr>
<td colspan = "2" align = "center"><font size = "5" color = "green"><b>用户注册</b></font></td>
</tr>
<tr>
< td align = "right">用户名：</td><td><input type = "text" id = "username" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">密 码：</td><td><input type = "password" id = "password" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">确认密码：</td><td><input type = "password" id = "qrpassword" style = "width:150px;height:20px" onpaste="return false"/> <font color = "red">警告：</font>禁止粘贴</td>
</tr>
<tr>
< td align = "right">身份证号：</td><td><input type = "text" id = "idcard" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">性 别：</td><td>男<input type = "radio" id = "sex" name = "sex" value = "boy"/>女<input type = "radio" name = "sex" id = "sex" value = "girl"/></td>
</tr>
<tr>
< td align = "right">出生日期：</td><td><input type = "text" id = "birthday" style = "width:150px;height:20px"/> <font color = "red">YYYY-MM-DD或者YYYY/MM/DD</font></td>
</tr>
<tr>
< td align = "right">籍 贯：</td><td><select id = "region">
< option value = "0">--请选择籍贯--</option>
< option value = "1">河南省郑州市</option>
< option value = "2">河南省信阳市</option>
< option value = "3">北京市海淀区</option>
< option value = "4">辽宁省大连市</option>
< option value = "5">广东省深圳市</option>
< /select>
< /td>
< /tr>
< tr>
< td align = "right">爱 好：</td><td><input type = "checkbox" id = "hobby" value = "music"/>音乐
<input type = "checkbox" id = "hobby" name = " hobby" value = "basketball"/>篮球
<input type = "checkbox" id = "hobby" name = " hobby" value = "visitor"/>旅游
<input type = "checkbox" id = "hobby" name = " hobby" value = "sleep"/>睡觉
<font color = "red">*</font>
< input type = "checkbox" id = "all" name = " all" onclick = "checkAll()"/>全选
<input type = "checkbox" id = "no" name = " bo" onclick = "checknoAll()"/>反选</td>
</tr>
<tr>
< td align = "right">邮 箱：</td><td><input type = "text" id = "email" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">手机号码：</td><td><input type = "text" id = "tel" style = "width:150px;height:20px"/></td>
</tr>
<tr>
< td align = "right">自我介绍：</td><td><textarea id = "intro" style = "width:150px;height:50px"></textarea></td>
</tr>
<tr>
<td colspan = "2" align = "right">
<input type = "submit" value = " 提交注册信息 " /> <input type = "reset" onclick = "cancel()" value = " 全部清空 "/>
</td>
</table>
</form>
< /body>
< /html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js表单验证自我总结
- JS常用表单验证总结
- JS常用表单验证方法总结
- 【JS】关于表单提交前验证的方法和可能遇到的问题总结
- 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结
- JS常用表单验证方法总结
- 2008年总结项目中常用到的JS验证脚本
- js登录特效+ajax提交表单+异步刷新验证
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- 最全面的JS表单验证
- js表单验证代码全集
- 自己总结的正则表达式的JS验证！
- js验证阻止表单提交(表单绑定onsubmit事件)
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- Js表单验证
- 常用JavaScript(js)表单验证CheckList V1.0(beta)
- 手把手教你自己写一个js表单验证框架
- 手把手教你自己写一个js表单验证框架的方法
- 写表单验证等页面的总结
- js循环表单验证,不能为空,和一定要输入数字