JavaScript--自定义对象:
方法一:构造函数创建对象1
function Person(){}
var p = new Person();
p.name = "zhangfei";
p.age = 19;
p.say = function(){alert(this.name+"say.....")};
alert(p.name);
alert(p["age"]);
p.say();
//删除一个属性
delete p.name
console.log(p);
//删除一个函数
delete p.say
console.log(p);
方法二:构造函数构造对象2
function Person(name,age){
this.name = name;
this.age = age;
this.say = function(){alert(this.name+"say....")}
}
var p = new Person("guanyu",20);
alert(p.name);
alert(p["age"]);
p.say();
方法三:对象直接定义对象
var p = {name:"liubei",age:19,sleep:function(){alert(this.name+"sleep.....")}};
alert(p.name);
alert(p["name"]);
p.sleep();
JavaScript--获取文档对象的方法
getElementById("id") | 根据id获取一个元素 |
getElementsByName("name") | 根据name获取一组元素 |
getElementsByTagName("tagname") | 根据元素名称获取一组元素 |
innerHTML() | 设置或获取位于对象起始和结束标签内的HTML |
innerText() | 设置或获取位于对象起始或结束标签内的文本 |
注册表单案例
<html>
<head>
<title>表单页面</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script>
function checkData(){
var canSub = true;
//非空校验
canSub = checkNull("username","用户名不能为空!") && canSub;
canSub = checkNull("password","密码不能为空!")&& canSub;
canSub = checkNull("password2","确认密码不能为空!")&& canSub;
canSub = checkNull("nickname","昵称不能为空!")&& canSub;
canSub = checkNull("email","邮箱不能为空!")&& canSub;
canSub = checkNull("valistr","验证码不能为空!")&& canSub;
canSub = checkNull("img","头像不能为空!")&& canSub;
//描述信息非空校验
//将获取到的标签内文本变成空
document.getElementById("desc_msg").innerText = "";
//通过name获取节点的值
var desc = document.getElementsByName("desc")[0];
if(desc.value == "请输入描述信息~!"){
document.getElementById("desc_msg").innerText = "描述信息不能为空!";
canSub = false;
}
//爱好非空校验
//将获取到的标签内文本变成空
document.getElementById("like_msg").innerText = "";
//通过name获取节点的值
var likes = document.getElementsByName("like");
//指定hasLike为FALSE,在进行判断
var hasLike = false;
for(var i = 0;i<likes.length;i++){
if(likes[i].checked == true){
hasLike = true;
break;
}
}
if(!hasLike){
document.getElementById("like_msg").innerText = "爱好不能为空!";
canSub = false;
}
//性别非空校验
//将获取到的标签内文本变成空
document.getElementById("gender_msg").innerText = "";
//通过name获取节点的值
var genders = document.getElementsByName("gender");
//指定hasGender为FALSE,在进行判断
var hasGender = false;
for(var i = 0;i<genders.length;i++){
if(genders[i].checked == true){
hasGender = true;
break;
}
}
if(!hasGender){
document.getElementById("gender_msg").innerText = "性别不能为空!";
canSub = false;
}
//两次密码一致的校验
//通过name获取节点的值
var psw1 = document.getElementsByName("password")[0].value;
var psw2 = document.getElementsByName("password2")[0].value;
if(psw1 != "" && psw2 !="" && psw1 != psw2){
document.getElementById("password2_msg").innerText = "两次密码不一致!";
canSub = false;
}
//邮箱格式的校验
//通过name获取节点的值
var email = document.getElementsByName("email")[0].value;
//通过正则表达式设定邮箱格式,进行判断
if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){
document.getElementById("email_msg").innerText = "邮箱格式不正确!";
canSub = false;
}
return canSub;
}
/*检验非空公共方法*/
function checkNull(name,msg){
document.getElementById(name+"_msg").innerText = "";
var tag = document.getElementsByName(name)[0];
if(tag.value == ""){
document.getElementById(name+"_msg").innerText = msg;
return false;
}
return true;
}
//描述信息处理
//获得焦点
function descFocus(obj){
if(obj.value == "请输入描述信息~!"){
obj.value = "";
}
}
//失去焦点
function descBlur(obj){
if(obj.value == ""){
obj.value = "请输入描述信息~!";
}
}
</script>
<style type="text/css">
span{
color:red;
font-size:12px;
}
</style>
</head>
<body>
<form action="http://localhost:8080" method="POST" onsubmit="return checkData()">
<table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
<caption><font color="red" size="6">注册表单</font></caption>
<input type="hidden" name="id" value="9527"/>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" /> <span id="username_msg"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"/> <span id="password_msg"></span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span>
</td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"/> <span id="email_msg"></span></td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="like" value="lq"/>篮球
<input type="checkbox" name="like" value="zq"/>足球
<input type="checkbox" name="like" value="qq"/>铅球
<input type="checkbox" name="like" value="blq"/>玻璃球
<span id="like_msg"></span>
</td>
</tr>
<tr>
<td>客户类型:</td>
<td>
<select name="type">
<option value="pm">平民</option>
<option value="sxdy">少先队员</option>
<option value="gqty">共青团员</option>
<option value="ybdy">预备党员</option>
<option value="zsdy">正式党员</option>
</select>
<span id="type_msg"></span>
</td>
</tr>
<tr>
<td>头像:</td>
<td>
<input type="file" name="img"/> <span id="img_msg"></span>
</td>
</tr>
<tr>
<td>描述信息:</td>
<td>
<textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~!</textarea> <br/><span id="desc_msg"></span>
</td>
</tr>
<tr>
<td>验证码:</td>
<td>
<input type="text" name="valistr"/>
<img src="1.jpg" width="100px" height="20px"/>
<span id="valistr_msg"></span>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" value="提 交"/>
<input type="reset" value="重 置"/>
</td>
</tr>
</table>
</form>
</body>
</html>