<html> <head><title>中信会员注册</title> <link rel="stylesheet" type="text/css" href="//m.sbmmt.com/"> <link rel="stylesheet" type="text/css" href="//m.sbmmt.com/"> <link rel="stylesheet" type="text/css" href="//m.sbmmt.com/"> <script language="javascript" type="text/javascript"> //validateText onfocus onblur onchange 验证用户名 function validateText( value ){ //获取img对像 div var img = document.getElementById( "img" ); var div = document.getElementById( "div" ); if( value.length < 1 ){ //验证失败 //alert( 用户名不能为空 ); img.src = "./img/invalid.gif"; img.style.display = ; div.innerHTML = "用户名不能为空"; div.style.color = "red"; //设置焦点 document.csuinfo.username.focus(); return false; }else{ //alert( 用户名验证成功 ); img.src = "./img/valid.gif"; img.style.display = ; div.innerHTML = "用户名验证成功"; div.style.color = "blue"; return true; } } //validatePassword function validatePassword( value ){ //alert( value ); if( value.length <4 ){ alert("密码至少4位"); //设置焦点 document.csuinfo.password.focus(); return false; } var pattern = /^d*$/;//数字0个或多个 if (!pattern.test(value)) {//如是密码不为数字就输出 alert("密码只能为数字"); } return true; } //confirmPassword function confirmPassword( value ){ // if( value != document.csuinfo.password.value ){ alert( "两次密码不致,请重新输入!" ); document.csuinfo.password2.focus(); return false; } return true; } //validateSex function validateSex(){ var flag = true; var sex = document.getElementsByName( "sex" ); //alert( sex.length ); for( i = 0; i < sex.length;i++ ){ //通过checked检查哪个单选是否被选中, if( sex[i].checked ){ flag = false; break; } } if( flag ){ alert( "请选择你的性别!" ); return false; } return true; } //validateLike function validateLike(){ var flag = true; var like = document.getElementsByName( "like" ); //alert( like.length ); for( i = 0; i < like.length;i++ ){ //通过checked检查哪个单选是否被选中, if( like[i].checked ){ flag = false; break; } } if( flag ){ alert( "请选择你的爱好!" ); return false; } return true; } //validateSelect function validateSelect(){ var flag = true; //selected var s = document.csuinfo.s; //alert( s.length ); for( i = 0; i < s.length;i++ ){ //通过checked检查哪个单选是否被选中, if( s[i].selected ){ flag = false; break; } } if( flag ){ alert( "请选择你的分会!" ); return false; } return true; } //提交当前页面的数据到目标资源处理 1:通过submit按钮提交 在form中通过onsubmit事件调用对应的验证方法 onsubmit="return onsubmit2()" function submit2(){ //alert( "ffffff" ); if( validateLike() && validateSelect() ){//验证成功,调用方法验证,爱好与帮会的值是否选中 return true; } return false; } // 2:通过button提交 当前表单的submit元素的name属性值不能为submit function submit3(){ //alert( "ffffff" ); if( validateLike() && validateSelect()&&validateSex() ){//验证成功 //获取当前的form对像 var form1 = document.csuinfo; //修改form中的属性值 form1.action = "dynamicDoc.html"; form1.submit();//提交方法 return true; } return false; } //JS正则表达式 /^:开始 $/:结束 d:数字 D:非数字 w:数字,字母,下划线 W:与w相反 //[]:包含 {}:出现的次数 {2} 两次 {1,2}:至少一次,最多两次 .:任意字符 function validateAge( value ){ //alert( value ); var pattern = /^d$/; //1:规则匹配内容 var flag = pattern.test( value );//验证成功返回true,验证失败返回false flag = pattern.exec( value );//验证成功返回对应的值,验证失败返回null //2:通过内容匹配规则 flag = value.match( pattern );//验证成功返回对应的值,验证失败返回null flag = value.search( pattern );//验证成功返回0,验证失败返回-1 alert( flag ); } </script> </head> <body> <form name="csuinfo" action="obj.html" method="get" onSubmit="return submit2();"> <table align="center" border="2"> <caption>中信会员注册</caption> <tr> <td>用户名</td> <td><input type="text" name="username" maxlength="5" size="9" onblur="validateText(this.value)"/> <img id="img" src="./img/valid.gif" style="display: none" /><!--image标签主要是为了显示成功与否的图片,div标签用于显示成功与否的提示文字--> <span id="div"></span> </td> </tr> <tr> <td>age</td> <td><input type="text" name="age" maxlength="5" size="9" onblur="validateAge(this.value)"/> </td> </tr> <tr> <td>密码</td> <td><input type="password" name="password" onBlur="validatePassword( this.value )" /></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="password2" onBlur="confirmPassword( this.value )" /></td> </tr> <tr> <td>性别</td> <td>男:<input type="radio" name="sex" value="1" "/><!--name选一样,方便以后获取--> 女:<input type="radio" name="sex" value="0" "/> </td> </tr> <tr> <td>爱好</td> <td>音乐:<input type="checkbox" name="like" value="1" /><!--name选一样,方便以后获取--> 体育:<input type="checkbox" name="like" value="2" /> 游戏:<input type="checkbox" name="like" value="3" /> </td> </tr> <tr> <td>上传头像</td> <td><input type="file" name="file" value=111 /> </td> </tr> <tr> <td>图片按钮</td> <!-- image 和img属性一样 作用和submit按钮一样--> <td><input type="image" name="image" alt="提交" src="./gif/face.gif" /> </td> </tr> <tr> <td>hidden</td> <td><input type="hidden" name="flag" value="2" /> </td> </tr> <tr> <td>button</td> <td><input type="button" name="b" value="button" onClick="submit3();" /> </td> </tr> <tr> <td>你想参加帮会</td> <td> <select name="s" size="3" multiple> <option value="1">斧头帮</option> <option value="2">丐帮</option> <option value="3">红花会</option> <option value="4">天地会</option> </select> </td> </tr> <tr> <td>自我简介</td> <td><textarea name="info" rows="10" cols="25"> 12345 </textarea> </td> </tr> <tr> <td>单独button</td> <td><button type="reset">button2<img src="./gif/face.gif"/></button> </td> </tr> <tr> <td>操作</td> <td><input type="submit" value="注册" /> <input type="reset" value="重置" /></td> </tr> </table> </form> </body> </html>
已抢65795个
抢已抢32231个
抢已抢17822个
抢已抢9047个
抢已抢11680个
抢已抢24247个
抢