表单校验:对文本框,单选框,复选框,以及下拉列表的校验。
首先创建一个如下图所示的页面,包括文本框、单选框,复选框以及下拉列表。
代码如下:
<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>
实验结果: