静态登录校验

问题：登录校验

方式一：表单submit提交

① 添加onclick事件

         onclick 事件调用有返回值的函数，用“return 函数名() ”

 <form action="getloging.jsp" method="post" name="myForm">
    <ul>
    <li><input  type="text" id="userName"  name="userName" class="loginuser" value="" onclick="JavaScript:this.value=''"/></li>
    <li><input  type="password" id="passWord"  name="passWord" class="loginpwd" value="" onclick="JavaScript:this.value=''"/></li>
    <li><input  type="submit" class="loginbtn" value="登录" onclick="return cheackLogin()"/><label><input name="" type="checkbox" value="" checked="checked" />记住密码</label><label><a href="#">忘记密码？</a></label></li>
    </ul>
 </form>

 ②  写校验函数cheackLogin()

         如果账号或密码为空值，返回false；否则，返回true。这是因为cheackLogin()函数，调用JavaScript内置的submit函数。

//登录空值校验
	function cheackLogin(){
		//获取表单元素
		var userName = document.getElementById("userName").value;
		var passWord = document.getElementById("passWord").value;
		if(userName==""||passWord==""){
			alert("用户名或密码不能为空");
			return false;
		}else{
			return true;
		}
	};

方式二：普通按钮提交

① 添加onclick事件

         修改 <input>标签元素的type属性为button，同时给<form>添加name属性值myFrom，onclick事件调用butSubLogin()函数。

 <form action="getloging.jsp" method="post" name="myForm">
	    <ul>
		    <li><input  type="text" id="userName"  name="userName" class="loginuser" value="" onclick="JavaScript:this.value=''"/></li>
		    <li><input  type="password" id="passWord"  name="passWord" class="loginpwd" value="" onclick="JavaScript:this.value=''"/></li>
		    <li><input  type="button" class="loginbtn" value="登录" onclick="butSubLogin()"/><label><input name="" type="checkbox" value="" checked="checked" />记住密码</label><label><a href="#">忘记密码？</a></label></li>
	    </ul>
  </form>

② 写校验函数butSubLogin()

        如果账号或密码为空，不提交；否则调用document.myForm.submit();

	function butSubLogin(){
		//获取表单元素
		var userName = document.getElementById("userName").value;
		var passWord = document.getElementById("passWord").value;
		if(userName==""||passWord==""){
			alert("用户名或密码不能为空");
		}else{
			document.myForm.submit();
		}
	};

效果：

 说明：文章是我在学习过程中，记录的，如果哪里表述不准确，希望可以多多指正。