作业

1.邮箱验证：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证邮箱</title>
    <script>
        function checkEmail() {
            // 1获取邮箱地址给str
            str = document.getElementsByName('email')[0].value

            // 2.验证str是否包含'@','.' 是否非空
            if(str.length == 0) {
                alert("不能为空")
                return;
            }
            else if(str.indexOf('@') == -1){
                alert("不能没有@")
            }
            else {
                if(str.indexOf('.') == -1)
                    alert("不能没有.")
                else 
                    alert("Good!")
            }

        }
    </script>
</head>
<body>
    <form >
        <lable>
            请输入你的邮箱：
            <input type="text" name="email">
        </lable>
        <input type="button" value="验证邮箱" onclick="checkEmail()">
    </form>
</body>
</html>

 

 1.验证码：

 

 

3.信息填写：

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>无标题文档</title>
	<style>
		#form-result {
			width: 500px;
			height: 100px;
			border: 1px solid red;
			font-size: 16px;
			display: none;
		}

		footer {
			width: 1000px;
			height: 30px;
			background-color: azure;
		}
	</style>
	<script type=text/javascript>
function formInfo() {
	str = "你的信息是："
	str += document.form1.user.value
	if(document.form1.myradio[0].checked) {
		str += "先生，你好："
	}
	else str += "女士，你好："
	num = 0
	aihao = ""
	arr = document.form1.mybox;
	 for(var i = 0; i < arr.length; i ++) {
		 if(arr[i].checked) {
			 num++;
			 aihao += arr[i].value + "<br>"
		 }
	 }

	str += "你选泽了" + num + "种爱好，分别是：" + aihao
	document.getElementById("form-result").style.display = "block"
	document.getElementById("form-result").innerHTML = str
}
</script>
</head>

<body>
	<FORM METHOD="POST" name="form1" action="">
		<p>请输入你的姓名：<INPUT TYPE="TEXT" NAME="user" size=20>
		<p>性别：
			<INPUT TYPE="RADIO" NAME="myradio" VALUE="0" checked>男
			<INPUT TYPE="RADIO" NAME="myradio" VALUE="1">女
		<P>请选择你的爱好：
			<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="游泳">游泳
			<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="爬山">爬山
			<INPUT NAME="mybox" TYPE="CHECKBOX" VALUE="跳舞">跳舞
		<p>
			<INPUT TYPE="button" VALUE="提交" id="submit" onclick="formInfo()">
			<INPUT TYPE="RESET" VALUE="重置">
		</P>
	</FORM>
	<div id="form-result"></div>
	<footer>脚注信息</footer>
</body>

</html>

 

posted @ 2022-10-14 16:47  Luli&  阅读(19)  评论(0)    收藏  举报