注册界面 用javascript检查输入信息格式是否正确 完整版
来源:互联网 发布:java 时间上午下午 编辑:程序博客网 时间:2024/05/16 16:10
<html> <head> <title>register.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="register.css"> <script type="text/javascript" language = "javascript"> var allforms = document.forms;function check(){//单击一次提交 调用函数之前先清掉上一次的检查信息。userNameSpan.innerText = "";pswSpan.innerText = "";surePswSpan.innerText = "";ageSpan.innerText = "";emailSpan.innerText = "";telSpan.innerText = "";//用户名 检查 var len = allforms[0].userName.value.length; if(len<4 || len>6){ //window.alert("1"); userNameSpan.innerText = "用户名应该是4-6位"; //window.alert("2"); return false; } //密码检查 len = allforms[0].psw.value.length; if(len<3){ pswSpan.innerText = "密码位数最少3位"; return false; }else{ if(allforms[0].psw.value != allforms[0].sureName.value){ surePswSpan.innerText = "两次密码输入的不一致"; return false; } } //检查年龄 var age = allforms[0].age.value; var myReg = /(\d){1,2}/gi; if(!myReg.test(age)){ ageSpan.innerText = "年龄范围是0-99"; return false; }//电子邮箱检查var con = allforms[0].emailName.value;var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|org|net)$/gi;if(!myReg.test(con)){emailSpan.innerText = "不是电子邮箱";return false;}//检查电话号码var tel = allforms[0].tel.value; var myReg = /(\d){7,11}/gi; if(!myReg.test(tel)){ telSpan.innerText = "电话号是7位或者11位"; return false; }}</script> </head> <body> <h1>用户注册</h1> <form action="#" method = "post"> <table border = "0"> <tr><td class = "td1">用户 名</td><td class = "td2"><input class = "input1" type = "text" name ="userName" value = ""/> <span id = "userNameSpan" class = "span1"></span></td></tr> <tr><td>密 码</td><td><input class = "input1" name = "psw" type = "password" value = ""/> <span id = "pswSpan" class = "span1"></span></td></tr> <tr><td>确认密码</td><td><input class = "input1" name = "sureName" type = "password" value = ""/> <span id = "surePswSpan" class = "span1"></span></td></tr> <tr><td>年 龄</td><td><input class = "input1" name = "age" type = "text" value = ""/> <span id = "ageSpan" class = "span1"></span></td></tr> <tr><td>电子邮件</td><td><input class = "input1" name = "emailName" type = "text" value = ""/> <span id = "emailSpan" class = "span1"></span></td></tr> <tr><td>电话号码</td><td><input class = "input1" name = "tel" type = "text" value = ""/> <span id = "telSpan" class = "span1"></span></td></tr> <tr><td><input type = "submit" onclick = "return check()" value = "注册新用户"/></td><td><input type = "button" value = "重新填写"/></td></tr> </table> </form> </body></html>
/*用户名所在列的选择器*/.td1{width:80px;}/*输入框所在列的选择器*/.td2{width:300px;}/*注册信息不符合要求的提示信息*/.span1{font-size:12px;color:red;}/**/.input1{width:150px;}
0 0