JavaScript 校验表单（不通过不提交后台）

校验表单两种方式：

一、通过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>