表单校验表格形式
简介
复选择
单选
选择均是最少选择一个
方式：
获取页面元素JavaScript对象
<body>
<script>
function check(){
var element=document.getElementById("user_name");//获取页面元素JavaScript对象
if(element.value==""){
alert("请输入用户名");
return false;
}
element = document.getElementById("password");
if(element.value==""){
alert("请输入密码");
return false;
}
return true;
}
</script>
<form action="http://www.baidu.com" οnsubmit="return check()">
<input id="user_name" placeholder="请输入用户名"/>
<input id="password" type="password" placeholder="请输入密码"/>
<input type="submit" value="登陆"/><input type="reset" value="重置"/>
</form>
<script>
function ch(){
var element=document.getElementById("uname");
if(element.value==""){
alert("请输入用户名");
return;
}
element = document.getElementById("pass");
if(element.value==""){
alert("请输入密码");
return;
}
element = document.getElementById("summary");
if(element.value==""){
alert("请输入简介");
return;
}
var elements=document.getElementsByName("sex");
var flag=0;
for(var i=0;i<elements.length;i++){
if(elements[i].checked){
flag=1;
break;
};
}
if(flag==0){
alert("请选择性别");
return;
}
var elements=document.getElementsByName("hobby");
var flag=0;
for(var i=0;i<elements.length;i++){
if(elements[i].checked){
flag=1;
break;
};
}
if(flag==0){
alert("请选择爱好");
return;
}
element=document.getElementById("gard").options;
for(var i=0;i<elements.length;i++){
if(elements[i].selected && elements[i].value==""){
alert("请选择年级");
return;
};
}
//document.getElementById("login").submit();
}
</script>
<style>
#button{
font-style: normal;
cursor: pointer;
background-color: red;
width: 200px;
height: 70px;
display: inline-block;
line-height: 70px;
text-align: center;
}
</style>
<form id="login" action="http://www.baidu.com" >
<input id="uname" placeholder="请输入用户名"/>
<input id="pass" type="password" placeholder="请输入密码"/>
简介
<textarea id="summary"></textarea>
单选
<input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女<label for=""></label>
复选
<input type="checkbox" name="hobby" value="0"/>篮球<input type="checkbox" name="hobby" value="1"/>足球<input type="checkbox" name="hobby" value="2"/>橄榄球
<select id="gard">
<option value="">--请选择--</option>
<option value="1">一年级</option>
<option value="2">二年级</option>
</select>
<i id="button" οnclick="ch()">登陆</i>
<i id="reset">重置</i>
</form>
<script>
document.getElementById("reset").addEventListener("",function(){
document.getElementById("login").reset();
});
</script>
</body>
扫一扫
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
