校验表单两种方式:
一、通过onsubmit()方式来检查用户名密码是否输入:
代码如下(有注释):
<script>
function check()
{
var element = document.getElementById("user_name");//获取用户名的输入元素标签
if(element.value=="")//如果用户名为空,提示并返回false
{
alert("用户名不能为空");
return false;
}
element = document.getElementById("password");//获取密码的输入元素标签
if(element.value=="")//如果密码为空,提示并返回false
{
alert("密码不能为空");
return false;
}
return true;//只有用户名和密码都不为空才能返回true
}
</script>
<form action="http://www.baidu.com" onsubmit="return check()"> //返回false不提交
<input id="user_name" placeholder="请输入用户名"/>
<input id="password" type="password" placeholder="请输入密码"/>
<input type="submit" value="登录"/>
</form>
二、通过document的submit()方法实现:
代码如下(有注释):
<script>
function ch()
{
var element = document.getElementById("u_name");//获取用户名
if(element.value=="")
{
alert("用户名不能为空");
return;//如果用户名为空,提前返回方法,不提交
}
element = document.getElementById("pass");
if(element.value=="")
{
alert("密码不能为空");
return;//如果密码为空,提前返回方法,不提交
}
document.getElementById("sub").submit();//方法进行到这里将form的action提交
}
</script>
<form id="sub" action="http://www.baidu.com" >
<input id="u_name" placeholder="请输入用户名"/>
<input id="pass" type="password" placeholder="请输入密码"/>
<input type="button" value="登录" onclick="ch()"/> //点击时调用ch()方法
</form>
对不同的对象进行表单校验:
一、input标签如上面所示。
二、textarea标签(文本框与上述类似):
<script>
function ch()
{
var element = document.getElementById("aoo");
if(element.value=="")
{
alert("简介不能为空");
return;
}
document.getElementById("sub").submit();//方法进行到这里将form的action提交
}
</script>
<form id="sub" action="http://www.baidu.com" >
<textarea id="aoo"></textarea>
<input type="button" value="登录" onclick="ch()"/>
</form>
三、Radio 对象(Radio 对象代表 HTML 表单中的单选按钮):
<script>
function ch()
{
var elements = document.getElementsByName("sex");
var flag=1;//flag用来判断是否有一个被选中
for(var i=0;i<elements.length;i++)
{
if(elements[i].checked)//checked检查是否被选中,如果被选中返回true
{
flag=0;
break;
}
}
if(flag)
{
alert("请选择性别");
return;
}
document.getElementById("sub").submit();//方法进行到这里将form的action提交
}
</script>
<form id="sub" action="http://www.baidu.com" >
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<input type="button" value="登录" onclick="ch()"/>
</form>
四、Checkbox 对象(Checkbox 对象代表一个 HTML 表单中的多选):
代码与单选框相似:
<script>
function ch()
{
var elements=document.getElementsByName("hobby");
var flag=1;//flag用来判断是否有一个被选中
for(var i=0;i<elements.length;i++)
{
if(elements[i].checked)//checked检查是否被选中,如果被选中返回true
{
flag=0;
break;
}
}
if(flag)
{
alert("请选择爱好");
return;
}
document.getElementById("sub").submit();//方法进行到这里将form的action提交
}
</script>
<form id="sub" action="http://www.baidu.com" >
<input type="checkbox" name="hobby"/>篮球
<input type="checkbox" name="hobby"/>足球
<input type="checkbox" name="hobby"/>排球
<input type="button" value="登录" onclick="ch()"/>
</form>
五、Select 对象(Select 对象代表 HTML 表单中的一个下拉列表):
Option 对象:声Option 对象代表 HTML 表单中下拉列表中的一个选项。
<script>
function ch()
{
elements = document.getElementById("grade").options;
for(var i=0;i<elements.length;i++)
{
if(elements[i].selected && elements[i].value=="")//如果selected返回true(被选择了)且选择的内容是"",则表示没有选择
{
alert("请选择年级");
return;
}
}
document.getElementById("sub").submit();//方法进行到这里将form的action提交
}
</script>
<form id="sub" action="http://www.baidu.com" >
<select id="grade">
<option value="">--请选择--</option> //此处value值设置为没有,用来ch()方法的判断
<option value="1">一年级</option>
<option value="2">二年级</option>
</select>
<input type="button" value="登录" onclick="ch()"/>
</form>