html&js笔记--第一个网页工程
2020-07-14 06:15
260 查看
[code]<!--zhuce--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:''www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="mystyle2.css"> <title>新用户注册</title> <script type="text/javascript" src="myjs.js"> </script> </head> <body text="blue"> <h1 align="center">注册</h1> <form action="https://www.baidu.com/" onsubmit="return tovalid()"> <table align="center" > <tr><td>Name:</td> <td title="only recieve Chinese and English!"><input type="text" id="name" onblur="recover()"/></td></tr> <tr><td>Nickname: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="nickname" onblur="recover()" /></td><tr> <tr><td>Gender: </td><td><input type="radio" name="gender" value="male"/>Male</td><tr> <tr><td></td><td><input type="radio" name="gender" value="female"/>Female</td><tr> <tr><td>Password: </td><td><input type="password" id="pwd" onblur="recover()"/></td><tr> <tr><td>Adress: </td><td title="only recieve Chinese,English,number and underline!"><input type="text" id="address" onblur="recover()"/></td><tr> <tr><td>Postal Code: </td><td title="only recieve number and underline!"><input type="text" id="postalcode" onblur="recover()" /></td><tr> <tr><td>E-mail: </td><td title="only recieve English,number and underline!"><input type="text" id="e-mail" onblur="recover()"/></td> <td><select><option value="@163.com">@163.com</option> <option value="@qq.com">@qq.com</option> <option value="@bupt.edu.cn">@bupt.edu.cn</option> </select> </td> </tr> <tr><td>Personal hobby:</td><td><input type="checkbox" name="hobby" value="going swimming" />Going swimming</td><tr> <tr><td></td><td><input type="checkbox" name="hobby" value="reading books" />Reading books</td><tr> <tr><td></td><td><input type="checkbox" name="hobby" value="playing computer games" />Playing computer games</td><tr> <tr><td></td><td><input type="checkbox" name="hobby" value="going hiking" />Going hiking</td><tr> <tr><td></td><td><input type="checkbox" name="hobby" value="writing" />Writing</td><tr> <tr><td></td><td><input type="checkbox" name="hobby" value="extra" />Extra</td><tr> <tr><td>Telephone number: </td><td title="only recieve number and underline!"><input type="text" id="tel number" onblur="recover()"/></td><tr> <tr><td>Personal statement: </td><td><textarea rows="5" cols="19" id="per" onblur="recover()"></textarea></td><tr> </table> <div align="center"> <input type="submit" value="Submit" id="submit" disabled="disabled" /> <!--鼠标悬停事件触发事件1(全填完变黑) 鼠标点击触发事件2(检查是否填完并给出提示)--> </div> </form> </body> </html>
[code]//js //recover函数用于更改disabled function recover() { var a=document.getElementById("name").value; var b=document.getElementById("nickname").value; var c=document.getElementById("address").value; var d=document.getElementById("postalcode").value; var e=document.getElementById("tel number").value; var f=document.getElementById("e-mail").value; var g=document.getElementById("pwd").value; var h=document.getElementById("per").value; if(a) {if(b) {if(c) {if(d) {if(e) {if(f) {if(g) {if(h) {document.getElementById('submit').disabled=false;} else {document.getElementById('submit').disabled=true;} } else {document.getElementById('submit').disabled=true; } } else {document.getElementById('submit').disabled=true;} } else {document.getElementById('submit').disabled=true;} } else {document.getElementById('submit').disabled=true;} } else {document.getElementById('submit').disabled=true;} } else {document.getElementById('submit').disabled=true;} } else { document.getElementById('submit').disabled=true; } } //tovalid是判断submit function tovalid(){ var RegExp=/^[\u4E00-\u9FA5A-Za-z]+$/; var checknam=RegExp.test(document.getElementById("name").value); RegExp=/^[\u4E00-\u9FA5A-Za-z0-9_]+$/; var checknic=RegExp.test(document.getElementById("nickname").value); var checkadd=RegExp.test(document.getElementById("address").value); RegExp=/^[0-9_]+$/; var checkpos=RegExp.test(document.getElementById("postalcode").value); var checktel=RegExp.test(document.getElementById("tel number").value); RegExp=/^[A-Za-z0-9_]+$/; var checke=RegExp.test(document.getElementById("e-mail").value); if(checknam&checknic&checkadd&checkpos&checktel&checke==true) { alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+ "Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true"); alert("Perfect!waiting for submission! "); return true; } else { alert("Name:"+checknam+'\n'+"Nickname:"+checknic+'\n'+"Gender: true"+'\n'+"Password: true"+'\n'+ "Address:"+checkadd+'\n'+"Postal Code:"+checkpos+'\n'+"E-mail:"+checke+'\n'+"Personal hobby: true"+'\n'+"Telephone number:"+checktel+'\n'+"Personal statement: true"); alert("Please enter again!"); return false; } }
相关文章推荐
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第21讲_js运算符2_js移位运算_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第27讲_js一维数组_一维数组细节_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻便搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理...
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_ 第18讲_js课程介绍_js基本介绍_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第25讲_js系统函数_js函数调用方式_学习笔记_源代码图解_PPT文档整理
- 【HTML+CSS+JavaScript】网页实战开发笔记之二—关于Web标准,你不能不知道的事
- 构建颜色渐变的网页背景(HTML+JS)
- (清华大学HTML+CSS+JavaScript入门到精通学习笔记)第一章 网页设计基础
- JQuery笔记(表单验证)八 metadata-demo.html jquery.metadata.js