javascript入门
在上一个HTML入门中 我写了一个注册页面 现实情况下 我们就需要 对表单进行验证 比如说 输入框不能为空 两次输入的密码是否一致 还有单选按钮和复选框必须选一个的处理方式
简单的处理例子
<head>
<script language="javascript">
var num;
num=7;
//弹出消息框
//alert(num);
if(num%2==0){
alert(num+"是偶数");
}else{
alert(num+"不是偶数");
}
</script>
</head>
<body></body>
</html>
运行结果：
Paste_Image.png
这段代码的几点小知识点：
<script language = "javascript"></script>
- 这里设置了编写的语言是
javascript -
var在javascript里是可变参数 即可以代表int或者char等等 长度也不需要设定 -
alert（）；是windows.alert();这里 windows可以省略 是弹出消息框
JavaSprict处理表单
这里我写了一个注册页面 一般注册页面 我们 不允许提交空的信息 那样是没有意义的
用javascript处理注册信息不能为空等
<head>
<script language="javascript">
function ckFrm(){
var uname = window.document.frm.uname.value;
if(uname==""){
alert("用户名不能为空！");
document.frm.uname.focus();
return false ;
}
var pas = document.frm.pas;
var pas2 = document.frm.pas2;
if(pas.value=="") {
alert("密码不能为空");
document.frm.pas.focus();
return false;
}
if(pas.value!=pas2.value) {
alert("两次输入的密码不一致");
return false;
}
if(!(document.frm.gender[0].checked || document.frm.gender[1].checked)) {
alert("总得选个性别吧");
return false;
}
var habbyArr = document.frm.habby;
var flag = false;
for(var i;i<habbyArr.length;i++) {
if(habbyArr[i].checked){
flag = true;
}
if(!flag) {
alert("选择一个你喜欢的吧");
}
return flag;
}
}
</script>
</head>
这上面部分实现处理部分小知识点：
-
document.frm.name是根据属性值的name属性选取内容 并判断 - 这里涉及到了一个复选框的不能为空判断 由于复选框的name值都一样 这里 就让我们具体的了解到了 复选框是根据数组存储的用数组的.length属性来判断
document.frm.habby[i]上代码中for循环可以看一下
<form name="frm" action="Demo.html" method="post" onsubmit="return ckFrm()">
<table width="400" border="1" cellspacing="0" cellpadding="3">
<tr>
<td>用户名:</td>
<td> <input type="text" name="uname"/> </td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pas"/> </td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="pas2"/> </td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="gender" value="female"/>女
<input type="radio" name="gender" value="male"/>男
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="habby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="song"/>唱歌
<input type="checkbox" name="hobby" value="sport"/>运动
<input type="checkbox" name="hobby" value="read"/>读书
</td>
</tr>
<tr>
<td>星座</td>
<td>
<select name="str" >
<option value="-1" >--请选择--</option>
<option value="1">摩羯座</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="submit" value=" 注 册 "/>
<input type="reset" value=" 重 置 "/>
</th>
</tr>
</table>
</form>
</body>
</html>
这是页面部分 乖宝宝 坚持看完 就一点点啦
小知识点：
- 昨天更的是简单的表格 这里将表格与
<input/>结合在一起 - 这里涉及到了 单选框 性别那一栏itype=radio- 复选框 爱好那一栏type=checkbox - 下拉选择框 星座那一栏
<select></select>标签实现- 按钮用了submit 和 reset -
form表单处理 那一栏onsubmit="return ckFrm()"点submit后调用函数
实现结果：
![Uploading Paste_Image_542744.png . . .]
Paste_Image.png
Paste_Image.png
网友评论