表单校验

最新推荐文章于 2023-09-07 14:17:35 发布

6666，

最新推荐文章于 2023-09-07 14:17:35 发布

阅读量151

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/low1101/article/details/103274957

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

表单校验：对文本框，单选框，复选框，以及下拉列表的校验。

首先创建一个如下图所示的页面，包括文本框、单选框，复选框以及下拉列表。

代码如下：

<body>
    <form onsubmit="return test()" >
        <input id="user_name" placeholder="请输入账号" />
        <br />
        <input id="pass" type ="password" placeholder="请输入密码" />
        <br />
        <input type="radio" name="sex" value="1"/>男<input type="radio" name="sex" value="2"/>女
        <br />
        <input type="checkbox" name="hobby" value="1"/>篮球
        <input type="checkbox" name="hobby" value="2"/>羽毛球 
        <input type="checkbox" name="hobby" value="3"/>足球 
        <br />
        <select id="opt">
	        <option value="">请选择</option>
	        <option value="1">一年级</option>
	        <option value="2">二年级</option>
        </select>
        <input type="submit" value="登录" />
	    <br />
	</form>
</body>

文本框的校验：

<script>
	function test(){
	//户名名校验是否为空
		var element = document.getElementById("user_name");//首先获取HTML内的id为user_name的元素
		var userName = element.value;//将element的值赋给userName
		if(userName==""){//检查是否为空
			alert("用户名不能为空")//如果是空就弹出一个窗口提示：
			return false;
		}
		//密码校验是否为空
		var element = document.getElementById("pass");
		var password = element.value;
		if(password==""){
			alert("密码不能为空")
			return false;
		}
    return true;
    }
</script>

实验效果如下：

单选框、复选框校验

<script>
	function test(){
	//单选框校验
		var elements = document.getElementsByName("sex");//
		var flag = false;
		for(var i=0; i<elements.length;i++){
			element=elements[i];
			if(element.checked){
				flag = true;
				break;
			}
		}
		if(!flag){
			alert("请选择性别");
			return false;
		}
		//复选框校验
		var elements = document.getElementsByName("hobby");
		var flag = false;
		for(var i=0; i<elements.length;i++){
			element=elements[i];
			if(element.checked){
				flag =true;
				break;
			}
		}
		if(!flag){
			alert("请选择爱好");
			return false;
		}
        return true;
    }
</script>

实验结果：

下拉列表校验

<script>
	function test(){

		element = document.getElementById("opt");
		flag = false;
		var options = element.options;
		for(var i=0; i<options.length;i++){
			var option=options[i];
			if(option.selected && option.value!=""){
				flag =true;
				break;
			}
		}
		if(!flag){
			alert("请选择年级");
			return false;
		}
		return true;
	}
</script>

实验结果：

6666，

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单校验

表单校验：对文本框，单选框，复选框，以及下拉列表的校验。首先创建一个如下图所示的页面，包括文本框、单选框，复选框以及下拉列表。代码如下：<body> <form onsubmit="return test()" > <input id="user_name" placeholder="请输入账号" /> ...
复制链接

扫一扫