html第六课时js基础

来源：互联网发布：云计算saas 编辑：程序博客网时间：2024/05/09 02:11

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript">//js的样式开头必须是这样的。        function validate()//他的方法必须以function开头。        {            var staffNo=document.getElementById('staffNo');            var staffName=document.getElementById('staffName');            var sex=document.getElementsByName('Sex');            var pos=document.getElementById('pos');            var password=document.getElementById('password');            var introduction=document.getElementById('introduction');            if(staffNo.value=="")            {                alert("员工工号不能为空！");                staffNo.focus();                return false;            }            if(staffName.value=="")            {                alert("员工姓名不能为空！");                staffName.focus();                return false;            }            if(sex[0].checked)//checkbox的验证是否为空的方法            {                console.log("您选择了男","提示")                /*alert(sex[0].value);*/            }            else            {                console.log("您选择了女","提示")                /*alert(sex[1].value);*/            }            /*var index=pos.selectedIndex;            var posvalue=pos.options[index].text;*/            if(pos.value=="")            {                alert("请选择职位！");                pos.focus();                return false;            }            if(introduction.value=="")            {                alert("请输入简介！");                introduction.focus();                return false;            }            /*string.prototype.trim=function()             {             return this.replace(/(^\s*)|(\s*S)/g,"");             正则表达式             }*/           return true;        }    </script></head><body><form action="" method="post">    <table border="1"  align="center" bordercolor="#ccc" cellpadding="5px">        <tr align="center">            <td colspan="3" >                员工信息            </td>        </tr>        <tr >            <td align="center"  width="20%" >                工号：            </td>            <td  width="50%" align="left" >                <input name="staffNo" id="staffNo" class="input">//添加Id唯一标识            </td>            <td width="30%" rowspan="5">                <img width="100%" id="image" height="300px" src="images/1.jpg">            </td>        </tr>        <tr >            <td>                姓名：            </td>            <td align="left" >                <input name="staffName" id="staffName" class="input">            </td>        </tr>        <tr >            <td>                性别：            </td>            <td  align="left">                <input type="radio" name="Sex" value="Man" checked>男                <input type="radio" name="Sex"  value="Woman">女            </td>        </tr>        <tr >            <td >                照片：            </td>            <td align="left" >                <input type="file" id="photo" name="staffPic">            </td>        </tr>        <tr >            <td>                职位：            </td>            <td align="left">                <select name="pos" id="pos">                    <option value="">                        请选择职位                    </option>                    <option value="1002">                        医生                    </option>                    <option value="1002">                        护士                    </option>                </select>            </td>        </tr>        <tr >            <td>                密码：            </td>            <td colspan="2" align="left">                <input type="password" id="password" name="password" class="input">            </td>        </tr>        <tr class="tr">            <td>                简介：            </td>            <td colspan="2"  align="left">                <textarea cols="80" rows="8" id="introduction"></textarea>            </td>        </tr>        <tr >            <td colspan="3">                <input type="submit" onclick="return validate()" value="提交">                <input type="reset" value="重置">            </td>        </tr>    </table></form></body></html>

<pre name="code" class="html">table{    border-collapse: collapse;    width: 60%;    margin-top:8em;    text-align:center;}tr{    height: 50px;}.tr{    height:100px;}.input{    width:200px;    height:22px;}select{    width:80px;    height:22px;}textarea{    text-indent:2em;}

0 0