HTML入门之javascript处理表单

作者: 小夫特 | 来源:发表于2016-04-27 23:29 被阅读673次

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/>结合在一起 - 这里涉及到了单选框性别那一栏i type=radio - 复选框爱好那一栏type=checkbox
下拉选择框星座那一栏<select></select>标签实现- 按钮用了submit 和 reset
form表单处理那一栏 onsubmit="return ckFrm()" 点submit后调用函数
实现结果：
![Uploading Paste_Image_542744.png . . .]
Paste_Image.png