<html>
<head>
<title>表单的验证</title></head>
<body>
<form action = "#" method = "get" name = "form1" onsubmit = "return check(event)">
<table align = "center" border = "0px
<form method="post" action="#" width = "800px" >
<tr><td colspan = "2" align = "center">注册</td></tr>
<tr><td align = "center" width = "120px">用户名:</td><td><input type = "text" name = "username"/></td></tr>
<tr><td align = "center">密码:</td><td><input type = "password" name = "password"/></td></tr>
<tr><td align = "center">再次确认：</td><td><input type = "password" name = "password1"/></td></tr>
<tr><td align = "center">性别:</td><td><input type = "radio" checked name = "sex"/>男<input type = "radio" name="sex"/>女</td></tr>
<tr><td align = "center">兴趣爱好:</td><td id = "habby"><input type = "checkbox"/>喝酒<input type = "checkbox"/>抽烟<input type = "checkbox"/>烫头</td></tr>
<tr><td align = "center">城市:</td><td><select name = "select1">
<option value = "5" selected>--请选择--</option>
<option value = "0">北京</option>
<option value = "1">上海</option>
<option value = "2">广州</option>
</select></td></tr>
<tr><td colspan = "2">个人简历:</td></tr>
<tr><td colspan = "2"><textarea name="text" rows="4" cols="30"></textarea></td></tr>
<tr><td colspan = "2" align = "center"><input type = "submit" value = "提交" /></td></tr>
</table>
</form>
</body>
<!-- ============================================================== -->
<script language = "javascript" type = "text/javascript">
document.form1.username.onblur = function () {
checkName();
}
document.form1.password.onblur = function () {
checkPassword();
}
document.form1.password1.onblur = function () {
checkPass();
}
function check(event) {
var flag = true;
var flag1 = checkName();
var flag2 = checkPassword();
var flag3 = checkPass();
var flag4 = selectTwo();
var flag5 = checkEducation();
var flag6 = text1();
flag = flag1 && flag2 && flag3 && flag4 && flag5 && flag6;
return flag;
}
//简历
function text1() {
var uPass = document.form1.text.value;
if (uPass == 0) {
tiShi(document.form1.text,"请输入简历");
return false;
}else {
delms(document.form1.text);
return true;
}
}
//验证用户名 规定要以字母开头 由10位以内
function checkName() {
var reg = /^[a-zA-Z][a-zA-Z0-9_]{0,9}$/g;
//获取用户名的内容
var uName = document.form1.username.value;
var uOb = document.form1.username;
if (!reg.test(uName)) { //如果验证不成功的话就提示用户
tiShi(uOb,"请输入以字母开头的用户名6到10位");
return false;
} else { //如果成功的话就删除原来的提示信息span
delms(uOb);
return true;
}
}
//验证密码是否是6-16位
function checkPassword() {
var uPass = document.form1.password.value;
if (uPass.length < 6 || uPass.length > 16) {
tiShi(document.form1.password,"请输入6-16位的密码");
return false;
}else {
delms(document.form1.password);
return true;
}
}
//确认密码
function checkPass() {
if (document.form1.password.value != document.form1.password1.value) {
tiShi(document.form1.password1,"你输入的密码与前面不符");
return false;
} else {
delms(document.form1.password1);
return true;
}
}
//至少要选择1个爱好
function selectTwo () {
var arr1 = document.getElementById("habby");
var arr = arr1.getElementsByTagName("input");
var count = 0;
for (var i = 0;i < arr.length ; i++ ) {
if (arr[i].checked) {
count++;
}
}
if (count == 0) {
tiShi(arr[0],"至少要选择1个爱好");
return false;
} else return true;
}
//选择城市
function checkEducation() {
var xueli = document.form1.select1;
var arr = xueli.options;
var count = 0;
for (var i = 1; i < arr.length ;i++ ) {
if (arr[i].selected) {
count++;
}
}
if (count != 0) {
return true;
}
else {
return false;
}
}
//创建一个提示用户的方法
function tiShi(dui,mess) {
var ob = dui.parentNode;
var oldSpan = ob.getElementsByTagName("span")[0];
if (!oldSpan)
{
//创建一个span的元素添加到对应的错误区域
var s = document.createElement("span");
s.innerHTML = mess;
s.style.color = "red";
ob.appendChild(s);
}
}
//删除提示信息span
function delms(ob) {
var oo = ob.parentNode;
var o1 = oo.getElementsByTagName("span")[0];
if (o1){
oo.removeChild(o1);
}
}
</script>
</html> |
收藏
淘帖
踩
