利用js实现注册问题中的一些验证

来源：互联网发布：路易斯威廉姆斯数据编辑：程序博客网时间：2024/04/25 14:10

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>方法简单的注册界面</title>
<script>
function $$(id){
return document.getElementById(id);
}
var ifemail =false;
var ifname = false;
var ifpwd =false;
function checkEmail(){
var echeck = $$("emailcheck");
if(echeck.value.trim().length==0){
$$("endemail").innerHTML="*邮箱不能为空";
$$("endemail").style.color="red";
}else{
var patterspace = /\s+/;
if(patterspace.test(echeck.value.trim())){
$$("endemail").innerHTML="输入的数据中间不能包含空格";
}else{
//检查输入的数据是否符合邮箱要求
var zzemail = /^\w+@\w+\.((cn)|(com)|(com.cn))$/;
if(zzemail.test(echeck.value.trim())){
ifemail=true;
$$("endemail").innerHTML="<img src='images/register_write_ok.gif'/>";
}else{
$$("endemail").innerHTML="*输入的格式不正确";
$$("endemail").style.color="red";

}
}
}
}
function checkName(){
var echeck = $$("namecheck");
if(echeck.value.trim().length==0){
$$("endname").innerHTML="*昵称不能为空";
$$("endname").style.color="red";
}else{
var patterspace = /\s+/;
if(patterspace.test(echeck.value.trim())){
$$("endname").innerHTML="输入的数据中间不能包含空格";
}else{
ifname=true;
$$("endname").innerHTML="<img src='images/register_write_ok.gif'/>";

}

}
}
function checkPwd1(){
var echeck = $$("pwdcheck1");
if(echeck.value.trim().length==0){
$$("endpwd1").innerHTML="*密码不能为空";
$$("endpwd1").style.color="red";
}else{
$$("endpwd1").innerHTML="<img src='images/register_write_ok.gif'/>";
}
}
function checkPwd2(){
var echeck = $$("pwdcheck2");
if(echeck.value.trim().length==0){
$$("endpwd2").innerHTML="*密码不能为空";
$$("endpwd2").style.color="red";
}else{
if($$("pwdcheck1").value==echeck.value){
ifpwd=true;
$$("endpwd2").innerHTML="<img src='images/register_write_ok.gif'/>";
}else{
$$("endpwd2").innerHTML="*两次密码不一致";
$$("endpwd2").style.color="red";
}
}
}
function checkall(){
return ifemail&&ifname&&ifpwd;
}
var hs = "";
window.onload= function(){
hs=document.getElementById("stc").children[0];//初始化
}
function selectplace(){
var placeom = document.getElementById("st").value;//得到选择的值
document.getElementById("stc").options.length=0;
switch (placeom){
case "1":
document.getElementById("stc").appendChild(hs);
break;
case "2":
//定义一个数组来存放有四川有哪些城市
var area = new Array("成都市","绵阳市","德阳市","乐山市","宜宾市");
for(var i=0;i<area.length;i++){
var getArea = area[i];
var createArea = document.createElement("option");
createArea.innerText=getArea;
document.getElementById("stc").appendChild(createArea);
}
break;
case "3":
//定义一个数组来存放有浙江有哪些城市
var areazj = new Array("杭州市","宁波市","舟山市","温州市");
for(var j=0;j<areazj.length;j++){
var getAreazj = areazj[j];
var createAreazj = document.createElement("option");
createAreazj.innerText=getAreazj;
document.getElementById("stc").appendChild(createAreazj);
}
break;
case "4":
//定义一个数组来存放有广东有哪些城市
var areagd = new Array("广州市","深圳市","佛山市","东莞市");
for(var k=0;k<areagd.length;k++){
var getAreagd = areagd[k];
var createAreagd = document.createElement("option");
createAreagd.innerText=getAreagd;
document.getElementById("stc").appendChild(createAreagd);
}
break;
default :
break;
}
}
</script>
</head>
<body>
<div style="background-color: deepskyblue;height: 50px">

</div>
<div style="background-color:skyblue ;height:600px ">
<table>
<tr><td>Email地址</td><td ><input id="emailcheck" type="text" name="textEmail" onblur="checkEmail();" style="border: 1px solid black"/><span id="endemail"></span></td></tr>
<tr><td>设置昵称</td><td class="emailcheck"><input id="namecheck" type="text" name="textName" onblur="checkName();" style="border: 1px solid black"/><span id="endname"></span></td></tr>
<tr><td>密码</td><td class="emailcheck"><input id="pwdcheck1" type="password" name="textPwd1" onblur="checkPwd1();" style="border: 1px solid black"/><span id="endpwd1"></span></td></tr>
<tr><td>再次确认密码</td><td class="emailcheck"><input id="pwdcheck2" type="password" name="textPwd2" onblur="checkPwd2();" style="border: 1px solid black"/><span id="endpwd2"></span></td></tr>
<tr><td>性别</td><td>男<input type="radio" name="one" checked >女<input type="radio" name="one" ></td></tr>
<tr><td>所在地区</td>
<td><select id="st" onchange="selectplace();">
<option value="1">
---请选择省---
</option>
<option value="2">
四川
</option>
<option value="3">
浙江
</option>
<option value="4">
广东
</option>
</select>
<select id="stc" >
<option>
---请选择城市---
</option>
</select></td>
</tr>
<tr><td><input type="submit" value="提&nbsp交&nbsp注&nbsp册"style="background-color: royalblue" onclick="return checkall();"/></td></tr>

</table>
</div>
</body>
</html>

0 0