<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 src="jquery-1.11.0.min.js"></script> <script> // 获取信息 var username; var password; var aiHao; function formCherk(){ username = $("#username").value; password = $("#password").value; aiHao = $(".aiHao").value; console.log(username + " " + password); // 校验 // 不符合 if (username == null || username == ""){ } } </script> </head> <body> <form id = "myForm"> <label for="name">姓名:</label> <input type="text" id="username" name="username"></input><br> <label for="name">密码:</label> <input type="password" id="password" name="password"></input><br> <label for="name">兴趣爱好:</label> <input type="checkbox" class="aiHao" name="aiHao" value="跑步">跑步</input> <input type="checkbox" class="aiHao" name="aiHao" value="打球">打球</input> <input type="checkbox" class="aiHao" name="aiHao" value="跳舞">跳舞</input><br> <input type="submit" value="注册"></input> <input type="submit" value="登录"></input> </form> </body> </html>补全
时间: 2023-10-05 12:05:26 浏览: 199
代码中的校验部分,使其能够实现以下功能:
1. 如果用户名为空,则在页面上显示提示信息“用户名不能为空”;
2. 如果密码为空,则在页面上显示提示信息“密码不能为空”;
3. 如果用户没有选择任何兴趣爱好,则在页面上显示提示信息“请选择兴趣爱好”。
代码补全如下:
```
if (username == null || username == ""){
alert("用户名不能为空");
return false;
}
if (password == null || password == ""){
alert("密码不能为空");
return false;
}
var checked = false;
$(".aiHao").each(function(){
if($(this).prop("checked")){
checked = true;
return false;
}
});
if(!checked){
alert("请选择兴趣爱好");
return false;
}
return true;
```
在校验部分,首先判断用户名和密码是否为空,如果为空则弹出提示信息并返回 false,表示校验失败。接着,使用 jQuery 的 each 方法遍历兴趣爱好的复选框,判断用户是否选择了其中的任何一个,如果没有则弹出提示信息并返回 false。最后,如果校验都通过了,则返回 true,表示校验成功。
相关问题
<!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>Document</title> </head> <body> <style>
抱歉,作为AI,我无法在这里展示CSS样式。但是,您可以在`<style>`标签中编写CSS样式,然后将其应用于网页中的HTML元素。例如,可以通过以下方式将样式应用于段落元素:
```
<style>
p {
color: blue;
font-size: 16px;
}
</style>
<p>This is a paragraph.</p>
```
这将使段落元素的文本颜色变为蓝色,字体大小为16像素。
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE
您提供的代码片段是一个HTML文档的起始部分。让我为您解释一下这个片段的内容和作用:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
这段代码的主要作用如下:
1. `<!DOCTYPE html>`: 这行声明告诉浏览器这是一个HTML5文档。
2. `<html>`: 这是HTML文档的根元素,所有其他元素都包含在其中。
3. `<head>`: 这个元素包含了文档的元数据,这些信息不会直接显示在网页上,但会告诉浏览器如何处理页面。
4. `<meta charset="utf-8">`: 这行代码设置了文档的字符编码为UTF-8,这是一种广泛使用的字符编码,可以支持世界上大多数语言的字符。
5. `<meta http-equiv="X-UA-Compatible" content="IE=edge">`: 这行代码用于指定IE浏览器使用的文档模式。"IE=edge"告诉IE使用最新的渲染引擎。
这段代码是每个HTML文档的标准开头,它为浏览器提供了基本的文档信息和设置,是构建网页的基础。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)