html第六课时js基础

最新推荐文章于 2024-09-20 08:38:36 发布

summerG1

最新推荐文章于 2024-09-20 08:38:36 发布

阅读量458

点赞数

分类专栏： html总结

本文链接：https://blog.youkuaiyun.com/gmdjajy/article/details/38301511

版权

html总结专栏收录该内容

5 篇文章

订阅专栏

<!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" οnclick="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;
}